Iframes不再需要用于通过ajax上传文件。最近我自己完成了这个任务。查看以下页面:
使用HTML5文件上传和AJAX以及jQuery
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
更新了答案并进行了清理。使用getSize函数检查大小或使用getType函数检查类型。添加了进度条HTML和CSS代码。
var Upload = function (file) {
this.file = file;
};
Upload.prototype.getType = function() {
return this.file.type;
};
Upload.prototype.getSize = function() {
return this.file.size;
};
Upload.prototype.getName = function() {
return this.file.name;
};
Upload.prototype.doUpload = function () {
var that = this;
var formData = new FormData();
formData.append("file", this.file, this.getName());
formData.append("upload_file", true);
$.ajax({
type: "POST",
url: "script",
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', that.progressHandling, false);
}
return myXhr;
},
success: function (data) {
},
error: function (error) {
},
async: true,
data: formData,
cache: false,
contentType: false,
processData: false,
timeout: 60000
});
};
Upload.prototype.progressHandling = function (event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
var progress_bar_id = "#progress-wrp";
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
$(progress_bar_id + " .progress-bar").css("width", +percent + "%");
$(progress_bar_id + " .status").text(percent + "%");
};
如何使用上传类
$("#ingredient_file").on("change", function (e) {
var file = $(this)[0].files[0];
var upload = new Upload(file);
upload.doUpload();
});
进度条的HTML代码
<div id="progress-wrp">
<div class="progress-bar"></div>
<div class="status">0%</div>
</div>
进度条 CSS 代码
#progress-wrp {
border: 1px solid #0099CC;
padding: 1px;
position: relative;
height: 30px;
border-radius: 3px;
margin: 10px;
text-align: left;
background: #fff;
box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar {
height: 100%;
border-radius: 3px;
background-color: #f39ac7;
width: 0;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
#progress-wrp .status {
top: 3px;
left: 50%;
position: absolute;
display: inline-block;
color: #000000;
}