ajaxはファイルアップロードを実現し、アップロードの進捗状況を傍受する
2673 ワード
ローカルファイルのアップロードの実装では、
なお、enctype=「multipart/form-data」フォームにenctype=「multipart/form-data」を多く追加する必要があるのは、フォームのMIME符号化を設定することを意味する.デフォルトでは、この符号化フォーマットはアプリケーション/x-www-encodedであり、ファイルアップロードには使用できません.Multipart/form-dataのみ使用
formdata formdataファイルによるアップロードは、追加のコードを書く必要がなく、バイナリストリーム形式でアップロードされます.
なお、enctype=「multipart/form-data」フォームにenctype=「multipart/form-data」を多く追加する必要があるのは、フォームのMIME符号化を設定することを意味する.デフォルトでは、この符号化フォーマットはアプリケーション/x-www-encodedであり、ファイルアップロードには使用できません.Multipart/form-dataのみ使用
formdata formdataファイルによるアップロードは、追加のコードを書く必要がなく、バイナリストリーム形式でアップロードされます.
var upload_file = document.getElementById('upload_file');
upload_file.addEventListener('change', upload, false);
function upload(){
if(window.FormData){
var formDate = new FormData($('#myForm')[0]);
console.log(" ");
$.ajax({
url: '/uploadAPK',
type:'POST',
//
data:formDate,
// jq Content-Type
cache:false,
contentType:false,
processData:false,
beforeSend :function () {
console.log(' ajax ')
},
xhr :function () {// jQuery XMLHttpRequest , progress , ajax
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',progressHandlingFunction, false)//progress 。 onprogress event , target XHR , :lengthComputable、loaded total。 ,lengthComputable ,loaded ,loaded Content-Length 。
}
},
success :function (data) {
alert('success');
console.log(data);
data = eval('(' + data + ')');
if(data.status = '0'){
setTimeout(function () {
var success_url = "http://" + location.host + "/report/";
},2000)
} else if(data.status = '1'){
alert(" , !");
fresh();
} else{
alert(" , !");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(" , ");
fresh();
}
})
} else{
alert(' , !');
}
}
function progressHandlingFunction(event) {
if (event.lengthComputable) {
var value = (event.loaded / event.total * 100 | 0);
$("#progress_bar_top").css('width', (value + '%'));
}
}
function fresh() {
window.location.reload();
}