Question

我正在使用基本的Blueimp文件上传插件。

我的HTML看起来像：

 <input id="fileupload" class="button-default" type="file" name="files[]" data-url="/php/upload.php" multiple>

我的剧本：

function subir(){
    $('#fileupload').fileupload({
        dataType: "json",
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                if(file.error != null){
                    $('#consola').text(file.error);
                };
                myFunction();
            });
        }
    });
};

现在，由于页面有一个菜单，我想隐藏文件输入框并使用菜单项来触发文件上传。

菜单项有一个'item5'类，所以我尝试了：

$('.item5').bind("click", subir);

但是功能subir没有被触发。直接与文件输入一起使用时效果很好。

提前感谢您的帮助！

Answer 1

<div onclick="uploadForm.upload.click()" style="width: 100px; height: 100px; background: red;"></div>

    <form name="uploadForm">        
        <input name="upload" id="uplaod" type="file" style="display: none"; />
    </form>

几乎所有浏览器都支持此功能。但是当通过将display设置为none来隐藏输入字段时，opera会有一些问题。

您可以使用javascript应用相同的逻辑来使其工作。并设置隐藏的可见性，而不是将显示设置为无。

<div id="menu" style="width: 100px; height: 100px; background: red;"></div>

    <form name="uf">        
        <input name="upload" id="upload" type="file" style="visibility: hidden;" />
    </form>

    <script type="text/javascript">
        document.getElementById("menu").onclick = function (evt) {
            document.getElementById("upload").click();
        }
    </script>

带菜单项的触发器文件输入元素

1 个答案: