Twitter bootstrap 从引导按钮调用FileAPI

这是我调用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

//导入SVG不像其他函数那样使用单击触发器。
var file=document.getElementById（'tool-importSVG'）；
file.addEventListener（'click'，函数（事件）{
var files=event.target.files；
对于（var i=0；i

这是HTML

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

---

是否有方法使用按钮来调用FileAPI？例如引导按钮。

如上所述，除了输入类型=文件之外，不可能使用任何其他方法。

---

您可以轻松地使用CSS设置样式，但是根据您的代码，您有

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>

---

您可以根据需要更改颜色：）

单击我

？@hd1似乎我需要传递一个事件，这对像我这样的新手来说有点困难，我更新了上面的代码以显示我的当前代码您当前的代码对我来说没有意义；你在点击一个

a

元素时做出了反应-从哪里会有一个

文件

集合…？@CBroe我在点击超链接“tool importSVG”时做出反应，不是吗？是的。一个普通的链接怎么会有任何你可以访问的

文件呢。您需要添加一些css。我已经更新了你的小提琴谢谢，我试着将输入的可见性设置为隐藏，但是js小提琴完美地说明了答案。谢谢如果我不能在明天得到更好的答案，赏金就归你了太好了！很高兴为您提供帮助：）我注意到旧的CSS中有一些错误，您能检查一下并更新CSS中的.fileinput按钮输入吗
 .fileinput-button input {
       position: absolute;
       opacity: 0;
       -ms-filter: 'alpha(opacity=0)';
       direction: ltr;
       cursor: pointer;
       margin-top: -25px 0 0 0;
    }