[英]why when i choose another file and submit, another request with the old file is sent?
Hi i'm using Jquery Upload plugin . 嗨,我正在使用Jquery Upload插件 。 I've got this problem:
我有这个问题:
when i upload the first file this work fine,a single request is sent. 当我上传第一个文件时,此工作正常,将发送单个请求。
But if i select a second file and i upload it,two request are sent and not one how i expected, the first with the old file and the second with the new one. 但是,如果我选择第二个文件并上载,则会发送两个请求,而不是我期望的一个,第一个请求包含旧文件,第二个包含新文件。 how i can avoid this behavior?
我如何避免这种行为?
here's the code: 这是代码:
html: 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: 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 + '%'
);
}
});
});
i try to reset data.files with 我尝试用以下方式重置data.files
data.files.pop();
but doesn't work. 但不起作用。
Solved: Instead using 解决:改为使用
<input type="submit" value="Upload " name="submit">
i used a button 我用了一个按钮
<button id="up_btn">upload</button>
and i've changed add function to: 并且我将添加功能更改为:
$("#up_btn").off('click').on('click', function () {
e.preventDefault();
data.submit();
return false;
});
After spending few hour on Jquery File Upload
在花了几个小时的
Jquery File Upload
I came to know that you can upload file in this way in order to have syn file upload 我知道您可以通过这种方式上传文件,以便同步文件上传
you can check the documentation here 您可以在这里查看文档
Problem found 发现问题
While doing data.submit() in add fileupload you are actually re-submiting
the form again n again therefore more than 1 ajax occurs.
Solution 解
HTML HTML
Select video to upload:
<input id="fileupload" type="file" name="files[]" multiple>
<div id="files" class="files"></div>
JS 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);
}
})
});
Final Code will be :- 最终代码将是:-
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.