从引导按钮调用FileAPI

Question

这是我的代码，用于调用FileAPI，将图像上传到客户端。

   //Import SVG does not use click triggers as other functions do.

var file = document.getElementById('tool-importSVG');
        file.addEventListener('click', function (event) {
            var files = event.target.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                if (file.type.match('svg')) {
                    project.importSVG(file, function(item) {
                        console.log(item);
                    });
                }
            }
        });
//End of SVG import

这是HTML

<li><a href="#"  id="tool-importSVG" >Import SVG</a></li>

是否有一种方法可以使用按钮来调用FileAPI?，例如引导按钮。

Answer 1

按照您的代码，您有var file = document.getElementById('tool-importSVG');

但是在事件侦听函数中，您再次使用了var file = files[i];，这意味着您要重新定义文件变量。我建议你重命名这个变量。

现在来问你的问题：

您可以使用引导按钮上传文件：

<span class="btn btn-success fileinput-button">
         <i class="glyphicon glyphicon-plus"></i>
         <span>Add files...</span>
         <input type="file" name="files[]" multiple="">
 </span>

它如下所示：

​

​

CSS：

 .fileinput-button input {
       position: absolute;
       opacity: 0;
       -ms-filter: 'alpha(opacity=0)';
       direction: ltr;
       cursor: pointer;
       margin-top: -25px 0 0 0;
    }

您可以根据需要更改颜色:)

Answer 2

正如CBRoe前面所述，除了输入类型=文件之外，不可能使用其他任何东西。不过，您可以轻松地使用CSS对其进行样式设计。