微客导航 » 文章资讯 » 实例讲解javascript实现异步图片上传方法

实例讲解javascript实现异步图片上传方法

2023-09-19 23:38:40 121

我们首先看下HTML代码实现的form提交部分。其中大家在测试的时候需要把test的URL更换成自己的，也可以直接写一个本地地址测试。

html代码：





保存

js代码：

varFileupload={
fileInput:$("#fileImage").get(0),
dragDrop:$("#fileDragArea").get(0),
upButton:$("#fileSubmit").get(0),
url:$("#uploadForm").attr("action"),
})(),
//文件上传
funUploadFile:function(){
varself=this;
for(vari=0,file;file=this.fileFilter[i];i++){
(function(file){
varxhr=newXMLHttpRequest();
if(xhr.upload){
//上传中
xhr.upload.addEventListener("progress",function(e){
self.onProgress(file,e.loaded,e.total);
},false);
//文件上传成功或是失败
xhr.onreadystatechange=function(e){

if(xhr.readyState==4){
if(xhr.status==200){
self.onSuccess(JSON.parse(xhr.responseText));
self.funDeleteFile(file);
if(!self.fileFilter.length){
//全部完毕
self.onComplete();
}
}else{
self.onFailure(file,xhr.responseText);
}
}
};
//准备FormData对象
varmyForm=document.getElementById('uploadForm');
//将文件放入FormData对象中
formData=newFormData(myForm);

//开始上传
xhr.open("POST",self.url,true);
xhr.send(formData);
}
})(file);
}
},
init:function(){
varself=this；
//上传按钮提交
if(this.upButton){
console.log('提示：当前存储服务器地址',this.url)
this.upButton.addEventListener("click",function(e){
self.funUploadFile(e);
},false);
}
self.bindEvent();
}
};
Fileupload=$.extend(Fileupload);
Fileupload.init();

FormData异步上传文件

一、创建FormData放入待上传文件

//准备FormData对象
varformData=newFormData(),
uploadFile=document.getElementById('file');

//将文件放入FormData对象中
formData.append('file',uploadFile.files[0]);

二、通过xhr发送FormData数据到服务器，实现文件上传

//创建xhr对象
varxhr=newXMLHttpRequest();

//监听文件上传进度
xhr.upload.onprogress=function(evt){
//lengthComputabel:文件长度是否可计算
if(evt.lengthComputable){
//evt.loaded:已下载的字节数
//evt.total:文件总字节数
varpercent=Math.round(evt.loaded*100/evt.total);
console.log(percent);
}
}

//监听文件传输开始
xhr.onloadstart=function(evt）{
xhr.abort()//终止上传
}

//监听ajax成功完成事件
xhr.onload=function(evt){
...
}

//监听ajax错误事件
xhr.onerror=function(evt){
...
}

//监听ajax被中止事件
xhr.onabort=function(evt){
...
}

//监听传输结束事件:不管成功或者失败都会触发
xhr.onloaded=function(evt){
...
}

//*发起ajax请求数据
xhr.open('POST','/url',true);
xhr.send(formData);

返回顶部
3162201930
czq8825@qq.com

实例讲解javascript实现异步图片上传方法

热门推荐

随机推荐