[英]How to upload file using jquery ajax php
I have a file uploading system using jquery's formdata
the thing goes like this ---> 我有一个使用jquery的
formdata
的文件上传系统,事情就这样--->
HTML HTML
<form id="upload-form" method="post" enctype="multipart/form-data" action="resource/php/upload.php">
<input style="display:none;" type="file" id="upload" multiple>
</form>
JQUERY JQUERY
$('#upload').change(function(e){
var formdata = new FormData(),file;
$('#ajax-loader').show(); //simple gif loader
for(var i=0;i<this.files.length;i++){
file = this.files[i];
var ftype = file.type;
formdata.append("files[]", file);
}
if (formdata) {
$.ajax({
url: "resource/php/upload.php",
type: "POST",
data: formdata,
dataType : 'json',
processData: false,
contentType: false,
success: function(data) {
$('#ajax-loader').hide();
//appends the currently uploaded images in a div
}
});
}
});
PHP PHP
//does lot of stuff
// echo's out 2 arrays in json format which is used in appending images as stated earlier^
echo json_encode(array("images"=>$db_image_id,"src"=>$db_image_src));
Now my question is when i am choosing files to upload it automatically using #upload
an #ajax-loader
is shown and hidden when files are uploaded. 现在我的问题是,当我选择使用
#upload
文件自动上传文件时,会在文件上传时显示和隐藏#ajax-loader
。 But i want to show a progress bar in percentage
and ETA(time left)
replacing the simple $('#ajax-loader')
. 但我想显示一个进度条,以
percentage
和ETA(time left)
代替简单的$('#ajax-loader')
。 However I googled and was able to do that using ajax-form
a jQuery Plugin. 但是我用
ajax-form
歌搜索并能够使用ajax-form
jQuery插件来做到这一点。 But i want to do in more real terms i dont want to use any PLUGINS . 但是我想以更真实的方式做我不想使用任何插件 。 How will i do that ?
我该怎么做?
And one more question is whether using the #upload-form
is that necesssary ? 还有一个问题是是否需要使用
#upload-form
?
You need to write custome xhr function to achieve tracking of progress of file uploads 您需要编写custome xhr函数来跟踪文件上传进度
$.ajax({
url: "resource/php/upload.php",
type: "POST",
data: formdata,
dataType : 'json',
processData: false,
contentType: false,
//@custome xhr
xhr: function() { // custom xhr
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
}
return myXhr;
},
//@custome xhr end
success: function(data) {
$('#ajax-loader').hide();
//appends the currently uploaded images in a div
}
});
See the comment @custome xhr in above code And add a function to update progress bar 参见上面的代码中的@custome xhr注释,并添加函数以更新进度栏
function updateProgress(evt) {
console.log('updateProgress');
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
} else {
// Unable to compute progress information since the total size is unknown
console.log('unable to complete');
}
}
Ref: https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest 参考: https : //developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.