5

我使用了 fileupload.js jquery 插件并按照本教程来实现：ASP.NET Ajax file upload using jQuery File Upload plugin

这很好用，但是一旦使用输入（fileuplaod 控件）选择文件，就会引发事件并上传文件。但是，我仅在单击按钮后才尝试执行此操作。

这是代码：

<input id="fileupload" type="file" name="file" multiple="multiple"/>
<input id="btnSubmit" type="button" value="Start Upload"/>

    $('#fileupload').fileupload({
      //uploads file
    });

需要做这样的事情：

  $('#btnSubmit').click(function () {
       $('#fileupload').fileupload({
         //uploads file
       });
    });

我想我们可以使用回调选项来做到这一点，但我无法正确理解：回调选项

4

5 回答 5

5

尝试这个：

<input id="fileupload" type="file" name="file" multiple="multiple"/>

<script>
$('#fileupload').on('click', function(){
    //uploads file
});
</script>

在 jQuery 中使用“on”。

问候。

于 2012-11-02T22:32:35.970 回答
2

在您关于此插件的链接中指出：“正如文档所述，'add' 默认使用 'data.submit()' 提交数据。但您可能希望对所选文件执行验证，例如，该文件扩展名是正确的。因此您的实现可能如下所示："

if(valid)
 data.submit();

下面是：“另一种选择可能是指示上传插件不要立即开始上传文件，并在用户手动单击某个“上传”按钮时进行验证。”

所以我想你必须剪掉这data.submit()条线，然后在你的点击按钮事件处理程序上调用它。

于 2012-11-05T19:25:21.540 回答
2

您可以这样做，通过“添加”选项上传文件

在标记中

<input id="files" type="file" name="files" multiple="multiple"/>
<input id="fileupload" type="file" name="file" multiple="multiple" style="display:none;"/>
<input id="btnSubmit" type="button" value="Start Upload"/>

输入 JQuery

$('#btnSubmit').click(function () {
    var inputs = $('#files'); 
    var arr = $.makeArray(inputs); // turn the jQuery objects into an array
    var filesList = $.map(arr, function (element, index) { 
        return element.files;
    });

    $('#fileupload').fileupload('add', { files: filesList }); // upload by calling 'add'
});
于 2012-10-28T08:38:35.543 回答
1

按钮 id="buttonUpload" onclick="return ajaxFileUpload();" style="font-size: 11px">上传/>

img id="loading" src="images/loading.gif" style="display: none;" /> -- 使其成为进度条

在脚本标签包括下面并根据您的要求进行修改

函数 ajaxFileUpload() {

        $("#loading")
.ajaxStart(function() {
    $(this).show();
})
.ajaxComplete(function() {
    $(this).hide();
});

$.ajaxFileUpload
    (
        {
            url: 'AjaxImageUploader.ashx',
            secureuri: false,
            fileElementId: 'fileToUpload',
            dataType: 'json',
            data: {},
            success: function(data, status) {

            },
            error: function(data, status, e) {
                alert(e);
            }
        }
    )

        return false;
    }
于 2012-11-06T07:38:06.293 回答
1

尝试这个：

<input id="fileupload" type="file" name="file" multiple="multiple" onClick="uploadFunction"/>

<script>
uploadFunction()
{
$('#fileupload').fileupload({
  //uploads file
});
}
</script>
于 2012-10-28T08:16:04.200 回答