单击页面中的任何按钮时，使用Jquery file Upload时都会打开文件对话框

When click any button in the page, file dialog will open while using Jquery-File-Upload

本文关键字：Upload file 对话框 文件 Jquery 使用 任何 按钮 单击      更新时间：2024-01-22

我正在使用以下HTML代码来实现文件上传

<span class="fileinput-button uploadBtn" id="btnUploadFile"><span>Add files</span><input id="fileupload" type="file" name="files[]" ></span>

是的。。单击"添加文件"按钮可以正常工作。但我的问题是，当点击页面上任何类型为"button"的输入元素时，它的行为就像文件上传器元素

例如：

<input type="button" id="btnDownLoad" value="Download" onclick="blah();" />
<span class="fileinput-button uploadBtn" id="btnUploadFile"><span>Add files</span><input id="fileupload" type="file" name="files[]" ></span>

如果同时单击两个按钮，则文件对话框将打开。我提到了jquery.filelpload.css 的css

.fileinput-button {
position: relative;
overflow: hidden;
}
.fileinput-button input {  // if i remove this block, other buttons didnt trigger file upload dialog. but i lost style
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}
/* Fixes for IE < 8 */
@media screen'9 {
.fileinput-button input {
filter: alpha(opacity=0);
font-size: 100%;
height: 100%;
}

脚本：

 $("#btnUploadFile").click(function () {
        Upload();
    });
    function Upload() {
        $('#fileupload').fileupload({
            dataType: 'json',
            url: '/Common/UploadFiles',
            autoUpload: true,
            done: function (e, data) {
                alert("Upload Successfully Done");
            }
        }

如何避免这些问题？

  1. 当只点击"btUnploadFile"按钮时，它应该会触发文件对话框

  2. 如果我删除jquery.filelpload.css中的css块，我就失去了我的风格。它看起来像一个带有浏览按钮的简单文本框。。那么，我该如何修改它的样式呢。

您的css非常混乱，span#btnUploadFile涵盖了所有内容。

我猜你想要一个不显示输入的文件上传按钮，你正在使用这里的第一个破解。试试这个问题中的第二个答案，它更优雅、更容易理解——输入按钮是可见的：隐藏的，另一个按钮上有一个点击事件处理程序（你也可以在跨度上有）。

相关文章：