html5 图片上传进度条 html5异步上传图片显示上传文件进度条

emo_album_id:

name:

Upload Image:

SentenceMovie[photo]

functionfileSelected() {var file = document.getElementById(‘fileToUpload‘).files[0];if(file) {var fileSize = 0;if (file.size > 1024 * 1024)

fileSize= (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + ‘MB‘;elsefileSize= (Math.round(file.size * 100 / 1024) / 100).toString() + ‘KB‘;

document.getElementById(‘fileName‘).innerHTML = ‘Name: ‘ +file.name;

document.getElementById(‘fileSize‘).innerHTML = ‘Size: ‘ +fileSize;

document.getElementById(‘fileType‘).innerHTML = ‘Type: ‘ +file.type;

uploadFile();

}

}functionuploadFile() {var fd = newFormData();

fd.append("upload_file", document.getElementById(‘fileToUpload‘).files[0]);

fd.append("emo_album_id", document.getElementById(‘emo_album_id‘).value);

fd.append("title", document.getElementById(‘title‘).value);var xhr = newXMLHttpRequest();

xhr.upload.addEventListener("progress", uploadProgress, false);

xhr.addEventListener("load", uploadComplete, false);

xhr.addEventListener("error", uploadFailed, false);

xhr.addEventListener("abort", uploadCanceled, false);

xhr.open("POST", "/emotions/1/api/index.php/emo/upload");

xhr.send(fd);

}functionuploadProgress(evt) {if(evt.lengthComputable) {var percentComplete = Math.round(evt.loaded * 100 /evt.total);

document.getElementById(‘progressNumber‘).innerHTML = percentComplete.toString() + ‘%‘;

}else{

document.getElementById(‘progressNumber‘).innerHTML = ‘unable to compute‘;

}

}functionuploadComplete(evt) {/*This event is raised when the server send back a response*/alert(evt.target.responseText);

}functionuploadFailed(evt) {

alert("There was an error attempting to upload the file.");

}functionuploadCanceled(evt) {

alert("The upload has been canceled by the user or the browser dropped the connection.");

}