javascript - 为什么当我选择另一个文件并提交时，会发送另一个包含旧文件的请求？

Question

嗨，我正在使用Jquery Upload plugin 。我遇到了这个问题:

当我上传第一个文件时，工作正常，发送一个请求。

但是，如果我选择第二个文件并上传它，则会发送两个请求，而不是我期望的那样，第一个请求包含旧文件，第二个请求包含新文件。我怎样才能避免这种行为？

这是代码:

html:

<form id="upload"   >
Select video to upload:
<input id="fileupload" type="file" name="upl" data-url="php/fileUploader/uploaderVideoHandler.php" >
<input type="submit" value="Upload " name="submit">

JavaScript:

$(function () {
$('#fileupload').fileupload({
   method:'POST',
    acceptFileTypes: /(\.|\/)(mp4)$/i,
    dataType: 'json',
    maxNumberOfFiles: 1,
    replaceFileInput:false,
    autoUpload:false,
    add: function (e, data) {
        data.context = $('#upload').submit(

            function (e) {  
                            e.preventDefault();

                            data.submit();
            });
    },
    done: function (e, data) {
        data.file
        $('#progress .bar').text('Upload finished.');
    },
       progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .bar').css(
        'width',
        progress + '%'
      );
    }
  });
 });

我尝试使用

重置 data.files

data.files.pop();

但不起作用。

已解决:而是使用

 <input type="submit" value="Upload " name="submit">

我使用了一个按钮

 <button id="up_btn">upload</button>

我已将添加功能更改为:

    $("#up_btn").off('click').on('click', function () {
        e.preventDefault();
        data.submit();
        return false;
    });

Answer 1

花了几个小时在Jquery文件上传之后
我开始知道你可以通过这种方式上传文件以便进行syn文件上传
您可以查看文档here

发现问题

While doing data.submit() in add fileupload you are actually re-submiting
the form again n again therefore more than 1 ajax occurs.

解决方案

HTML

Select video to upload:
<input id="fileupload" type="file" name="files[]" multiple>
<div id="files" class="files"></div>

JS

$(function () {
    'use strict';
    var url = 'server/php/',
    uploadButton = $('<button/>')
    .prop('disabled', true)
    .on('click', function () {
        var $this = $(this),
        data = $this.data();
        $this
        .off('click')
        .on('click', function () {
            $this.remove();
            data.abort();
        });
        data.submit().always(function () {
            $this.remove();
        });
    });
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        replaceFileInput:false,
        acceptFileTypes: /(\.|\/)(mp4)$/i,
        maxFileSize: 999000,
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')

            if (!index) {
                node.append(uploadButton.clone(true).data(data));
            }
            node.appendTo(data.context);
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);
        if (file.error) {
            node
            .append('<br>')
            .append($('<span class="text-danger"/>').text(file.error));
        }
        if (index + 1 === data.files.length) {
            data.context.find('button')
            .text('Upload')
            .prop('disabled', !!data.files.error);
        }
    })
});

最终代码将是:-

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.fileupload.css">

Select video to upload:
<input id="fileupload" type="file" name="files[]" multiple>
<div id="files" class="files"></div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.fileupload-process.js"></script>
<script src="js/jquery.fileupload-image.js"></script>

<script>
$(function () {
    'use strict';
    var url = 'server/php/',
    uploadButton = $('<button/>')
    .prop('disabled', true)
    .on('click', function () {
        var $this = $(this),
        data = $this.data();
        $this
        .off('click')
        .on('click', function () {
            $this.remove();
            data.abort();
        });
        data.submit().always(function () {
            $this.remove();
        });
    });
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        replaceFileInput:false,
        acceptFileTypes: /(\.|\/)(mp4)$/i,
        maxFileSize: 999000,
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')

            if (!index) {
                node.append(uploadButton.clone(true).data(data));
            }
            node.appendTo(data.context);
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);
        if (file.error) {
            node
            .append('<br>')
            .append($('<span class="text-danger"/>').text(file.error));
        }
        if (index + 1 === data.files.length) {
            data.context.find('button')
            .text('Upload')
            .prop('disabled', !!data.files.error);
        }
    })
});
</script>