单击页面中的任何按钮时，将使用Jquery-File-Upload打开文件对话框

Question

我使用下面的HTML代码来实现fileupload

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

是..单击添加文件按钮时工作正常。 但我的问题是当点击页面上有type =“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.fileupload.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. 单击“btnUploadFile”按钮时，应触发文件对话框

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

Answer 1

你的CSS很乱，跨度#btnUploadFile span涵盖了一切。

我猜你想要一个文件上传按钮而不显示输入，你在这里使用第一个黑客 。 尝试在该问题中的第二个答案，它更优雅，更容易理解 - 输入按钮具有可见性：隐藏，并且在另一个按钮上有一个点击事件处理程序（您也可以在您的跨度上）。