首先,需要在网站中加载ajaxFileUpload.js插件。接下来,我们需要在页面中添加一个上传文件的表单并指定一个id属性,例如:
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" multiple name="file" id="fileInput">
<button id="btn-upload" type="button">上传文件</button>
</form>
这里的multiple属性用来指定可以同时上传多个文件。
接着,在JavaScript代码中,使用ajaxFileUpload方法提交表单数据。示例如下:
$('#btn-upload').click(function() {
var url = 'upload.php'; //指定服务器端上传文件处理程序的URL
var fileInputs = $('#fileInput');
var files = fileInputs[0].files;
var data = new FormData();
for(var i=0; i<files.length; i++){
var file = files[i];
data.append('files[]', file);
}
//调用ajaxFileUpload方法,提交表单数据
$.ajaxFileUpload({
url: url,
secureuri: false,
fileElementId: 'fileInput',
dataType: 'json',
data: data,
success: function(data) {
//上传成功后的处理
},
error: function(xhr, status, error) {
//上传失败后的处理
}
});
});
这里使用FormData对象来保存待上传的文件,然后将FormData对象作为data属性给$.ajaxFileUpload方法传递。在服务器端处理程序中,可以通过使用file[]来获取所有上传的文件。
下面是另一个示例,演示如何实现在上传文件时,动态显示上传进度。
$('#btn-upload').click(function() {
var url = 'upload.php'; //指定服务器端上传文件处理程序的URL
var fileInputs = $('#fileInput');
var files = fileInputs[0].files;
var data = new FormData();
for(var i=0; i<files.length; i++){
var file = files[i];
data.append('files[]', file);
}
//显示上传进度条
var progressEle = $('<div>上传进度:<progress></progress></div>');
$('body').append(progressEle);
var progress = progressEle.find('progress');
//调用ajaxFileUpload方法,提交表单数据
$.ajaxFileUpload({
url: url,
secureuri: false,
fileElementId: 'fileInput',
dataType: 'json',
data: data,
uploadProgress: function(event, position, total, percentComplete) {
//更新进度条
progress.attr('value', percentComplete);
},
success: function(data) {
//上传成功后的处理
progressEle.remove();
},
error: function(xhr, status, error) {
//上传失败后的处理
progressEle.remove();
}
});
});
在这个示例中,我们首先动态创建一个进度条的DOM元素,并在表单上传过程中根据进度百分比动态更新进度条的value属性。上传完成后,再将进度条从DOM中移除。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:ajaxFileUpload.js插件支持多文件上传的方法 - Python技术站