Blueimp上传仅在选择第二个文件时触发

时间:2016-08-09 10:54:12

标签: jquery ajax blueimp

我有一个Blueimp jQuery多文件上传插件在内部项目上工作没有任何问题,但后来我需要触发通过AJAX添加的元素。此代码应该上传一个或多个文件,将文件名存储到数据库(由includes/file.inc.php的AJAX请求处理),然后报告文件上载状态。

HTML

<input type="hidden" name="co_id" value="<?php echo $_POST['co_id']; ?>" id="upload_co_id" />
<input id="fileupload" type="file" name="files[]" multiple>

的jQuery

$i = 0;
$(document).on('change','#fileupload',function(){
    var url = 'handler.php';
    var co_id = $('#upload_co_id').val();
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<span class="uploaded" id="file'+$i+'" />').text(file.name).appendTo('#files');
                $.ajax({
                    url: 'includes/file.inc.php',
                    type: "POST",
                    data: {'co_id': co_id,'file_name': file.name},
                    success: function(data) {
                      if (data == 1) {
                        $('#file'+index).addClass('success');
                        setTimeout(function() {
                            $('#file'+index).removeClass('success');
                        }, 1500);
                      } else {
                        $('#file'+index).addClass('failure');
                        $('#file'+index).append("\n"+data);
                      }
                    },
                    error: function() {
                        $('#file'+index).addClass('failure');
                    }
                });
                $i++;
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});

这确实有效,但只选择第二次时间文件。我知道$(document).on('change','#fileupload',function(){会在第一次选择文件时被触发,但在我单击文件输入并选择不同的文件之前,它不会处理该文件。我没有收到任何控制台错误。

我已经查看了关于此问题的Blueimp文档,并讨论了如何使用add回调选项,但这根本不起作用。

我已经在这个问题上抓了几个小时。为什么fileupload插件仅在第二次触发。

0 个答案:

没有答案