基于JQuery中AJAX的文件上传
以下是使用jQuery进行文件上传的示例代码:
HTML部分:
<form id="uploadForm">
<input type="file" name="file" />
<input type="submit" value="Upload" />
</form>
<div id="progress">
<!-- 进度信息将被插入到这里 -->
</div>
JavaScript部分(使用jQuery):
$(document).ready(function() {
$('#uploadForm').submit(function(e) {
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'upload.php', // 服务器端的URL
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
$('#progress').text(percentComplete.toFixed(2) + '%');
}
}, false);
}
return myXhr;
},
success: function(data) {
alert(data);
},
data: formData,
contentType: false,
processData: false,
cache: false
});
});
});
服务器端 (upload.php
) 的处理脚本需要根据实际情况编写,以接收上传的文件。以上代码实现了文件的异步上传,并在上传过程中显示进度信息。
评论已关闭