Question

我使用了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
       });
    });

我想我们可以使用回调选项执行此操作，但我无法正确理解：Callback Options

Answer 1

试试这个：

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

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

在jQuery中使用'on'。

问候。

Answer 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"/>

IN 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'
});

Answer 3

在您关于此插件的链接中说明： “正如文档所述，'添加'默认使用'data.submit（）'提交数据。但您可能希望对所选文件执行验证，例如，文件扩展名是正确的。所以您的实现可能看起来像这样：“

if(valid)
 data.submit();

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

所以我想你必须剪切这个data.submit()行，而是在你的点击按钮事件处理程序中调用它。

Answer 4

试试这个：

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

<script>
uploadFunction()
{
$('#fileupload').fileupload({
  //uploads file
});
}
</script>

Answer 5

button id =“buttonUpload”onclick =“return ajaxFileUpload（）;” style =“font-size：11px”＆gt; 上传/＆gt;

img id =“loading”src =“images / loading.gif”style =“display：none;” /＆GT; - 使其进度吧

在脚本标签中包含以下内容并根据您的要求进行修改

function 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;
    }

单击按钮时的jquery fileupload

5 个答案: