我有多个文件上传表单：
<input type="file" name="files" multiple />
我张贴这些文件与阿贾克斯。 我想选择的文件上传一个接一个（创建单独的进度条，以及出于好奇）。
我能得到的文件或单个文件的列表
FL = form.find('[type="file"]')[0].files
F = form.find('[type="file"]')[0].files[0]
yieling
FileList { 0=File, 1=File, length=2 }
File { size=177676, type="image/jpeg", name="img.jpg", more...}
但是，文件清单是不可改变的，我无法弄清楚如何提交单个文件。
我认为这是可能的，因为我看到http://blueimp.github.com/jQuery-File-Upload/ 。 我不想不过使用这个插件，因为它是尽可能多的关于学习的结果（和它需要太多custimizing反正）。 我也不想使用Flash。
对于这是一个同步操作，您需要在最后一个完成，开始新的传递。 Gmail为例，一次发送的一切，同时。 对AJAX的文件上传进度的事件progress或者onprogress对原始XmlHttpRequest实例。
所以，以后每次$.ajax()在服务器端（我不知道你会使用什么），发送一个JSON响应执行对下一个输入的AJAX。 一种选择是对AJAX元素结合到每一个元素，使事情变得更容易，所以你可以只执行，在success的$(this).sibling('input').execute_ajax()
事情是这样的：
$('input[type="file"]').on('ajax', function(){
var $this = $(this);
$.ajax({
'type':'POST',
'data': (new FormData()).append('file', this.files[0]),
'contentType': false,
'processData': false,
'xhr': function() {
var xhr = $.ajaxSettings.xhr();
if(xhr.upload){
xhr.upload.addEventListener('progress', progressbar, false);
}
return xhr;
},
'success': function(){
$this.siblings('input[type="file"]:eq(0)').trigger('ajax');
$this.remove(); // remove the field so the next call won't resend the same field
}
});
}).trigger('ajax'); // Execute only the first input[multiple] AJAX, we aren't using $.each
上面的代码将是多个<input type="file">而不是<input type="file" multiple> ，在这种情况下，它应该是：
var count = 0;
$('input[type="file"]').on('ajax', function(){
var $this = $(this);
if (typeof this.files[count] === 'undefined') { return false; }
$.ajax({
'type':'POST',
'data': (new FormData()).append('file', this.files[count]),
'contentType': false,
'processData': false,
'xhr': function() {
var xhr = $.ajaxSettings.xhr();
if(xhr.upload){
xhr.upload.addEventListener('progress', progressbar, false);
}
return xhr;
},
'success': function(){
count++;
$this.trigger('ajax');
}
});
}).trigger('ajax'); // Execute only the first input[multiple] AJAX, we aren't using $.each
这看起来像一个非常好的教程，你要找的 。
这说明，在所有的浏览器不支持通过香草AJAX上传，我还是希望推荐使用iframe 。 （IE动态创建的iframe和使用javascript张贴）
我一直用这个剧本 ，我觉得它非常简洁。 如果您想了解如何通过创建一个iframe上传，你应该挖通过它的来源。
希望能帮助到你 ：）
额外的编辑
要创建iframe的方法进度条，你需要做一些工作的服务器端。 如果你正在使用PHP，你可以使用：
如果使用nginx的你也可以选择与自己编译上传进度模块
所有这些工作，以同样的方式 - 每一个上传有UID，你会为通过AJAX以一致的时间间隔与该ID相关联的“进步”要求。 由服务器决定这将返回上传进度。
我正面临同样的问题，这个解决方案来。 我简单地检索与多形式，并在递归调用（文件后，文件）启动Ajax请求，做时只调用next。
var form = document.getElementById( "uploadForm" );
var fileSelect = document.getElementById( "photos" );
var uploadDiv = document.getElementById( "uploads" );
form.onsubmit = function( event ) {
event.preventDefault( );
var files = fileSelect.files;
handleFile( files, 0 );
};
function handleFile( files, index ) {
if( files.length > index ) {
var formData = new FormData( );
var request = new XMLHttpRequest( );
formData.append( 'photo', files[ index ] );
formData.append( 'serial', index );
formData.append( 'upload_submit', true );
request.open( 'POST', 'scripts/upload_script.php', true );
request.onload = function( ) {
if ( request.status === 200 ) {
console.log( "Uploaded" );
uploadDiv.innerHTML += files[ index ].name + "<br>";
handleFile( files, ++index );
} else {
console.log( "Error" );
}
};
request.send( formData );
}
}
使用此源代码，你可以通过一个通过Ajax上传像谷歌一个多个文件。 你还可以看到上传进度
HTML
<input type="file" id="multiupload" name="uploadFiledd[]" multiple >
<button type="button" id="upcvr" class="btn btn-primary">Start Upload</button>
<div id="uploadsts"></div>
使用Javascript
<script>
function uploadajax(ttl,cl){
var fileList = $('#multiupload').prop("files");
$('#prog'+cl).removeClass('loading-prep').addClass('upload-image');
var form_data = "";
form_data = new FormData();
form_data.append("upload_image", fileList[cl]);
var request = $.ajax({
url: "upload.php",
cache: false,
contentType: false,
processData: false,
async: true,
data: form_data,
type: 'POST',
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if(xhr.upload){
xhr.upload.addEventListener('progress', function(event){
var percent = 0;
if (event.lengthComputable) {
percent = Math.ceil(event.loaded / event.total * 100);
}
$('#prog'+cl).text(percent+'%')
}, false);
}
return xhr;
}
})
.success(function(res,status) {
if(status == 'success'){
percent = 0;
$('#prog'+cl).text('');
$('#prog'+cl).text('--Success: ');
if(cl < ttl){
uploadajax(ttl,cl+1);
}else{
alert('Done ');
}
}
})
.fail(function(res) {
alert('Failed');
});
}
$('#upcvr').click(function(){
var fileList = $('#multiupload').prop("files");
$('#uploadsts').html('');
var i
for ( i = 0; i < fileList.length; i++) {
$('#uploadsts').append('<p class="upload-page">'+fileList[i].name+'<span class="loading-prep" id="prog'+i+'"></span></p>');
if(i == fileList.length-1){
uploadajax(fileList.length-1,0);
}
}
});
</script>
PHP
upload.php
move_uploaded_file($_FILES["upload_image"]["tmp_name"],$_FILES["upload_image"]["name"]);
