上周帮其它公司套一下一个web端微信投票系统的后台接口，遇到了一个图片以及视频上传报名的小问题，网上实现方式有很多但都不是ui上面的效果，于是自己动手改造了一个。先来看看效果图
流程很简单，就是点击每一个加号浏览本地图片并确定后会自动发送一个formData到后台提交图片，成功后会返回图片在后台的url，前端界面会在提交过程中显示上传进度，上传过程会有提示,先看基本html代码吧
<div class="img">
<i id="proTxt_3" class="upload-txt"></i>
<div id="proLong_3" class="upload-bar"></div>
<img src="" alt="" id="previewIndex_3" />
<input type="file" name="fileToUpload" class="fileToUpload up" accept="image/*" onchange="showPreview(this,3)" />
</div>
每块div代表一个file选择框，这里就不放另外两个了
上传部分使用了h5的xmlhttprequest,并监听上传进度(整体代码就在这里了)：
//图片预览
varuploder= {
fileToUpload: document.getElementsByClassName("fileToUpload"),
thumb: document.getElementsByClassName("thumb")
};
imgArr= [];//传到后台的图片
videoUrl='';//传到后台的视频
functionshowPreview(img, index) {
varfile=img.files[0];//当前文件(默认只能单选)
varlen=uploder.fileToUpload.length;
varfileSize=0;
if (file.size >1024*1024) {//获取文件大小做相应限制
fileSize= (Math.round(file.size *100/ (1024*1024)) /100).toString() +'MB';
console.log(fileSize);
} else {
fileSize= (Math.round(file.size *100/1024) /100).toString() +'KB';
console.log(fileSize);
};
if (window.FileReader) {//文件预览
varfr=newFileReader();
fr.onloadend=function (e) {
for (vari=1; i<=len; i++) {
if (i==index) {//当前图片索引
document.getElementById('previewIndex_'+i).src=e.target.result;
varfd=newFormData();
fd.append('file', file);//'file'为传过去的参数(type String)
console.log(file);
varxhrs=newXMLHttpRequest();
xhrs.upload.addEventListener("progress", uploadProgress, false);//监听上传进度
xhrs.addEventListener("load", uploadComplete, false);
xhrs.addEventListener("error", uploadFailed, false);
xhrs.open("POST", 'http://vote.jiugoule.net/index.php?s=app/participate/upload&uid=93&token=b8d3bce08ccd81677f935c2da6e7b4f0&activity_id=2');
xhrs.send(fd);
functionuploadProgress(event) {//上传中
if (index==4) {//添加视频背景图
$(".video-bg").show();
}
if (event.lengthComputable) {
varpercentComplete= Math.round(event.loaded*100/ event.total);
//console.log(document.getElementById("proTxt_" + index),index);
document.getElementById("proTxt_"+index).innerHTML=percentComplete.toString() +'%';
document.getElementById("proLong_"+index).style.height =percentComplete.toString() +'%';
}
};
functionuploadComplete(event) {//上传完成
if (index==4) {//视频(需知道位置)
document.getElementById("proTxt_"+index).innerHTML="视频上传完成,点击更改";
$(".video-select").css({//防止file选择被遮挡
'z-index': 6
});
//return;
varresVideo=eval("("+ event.target.responseText +")");//视频
videoUrl=resVideo.data.url;
} else {
varresJson=eval("("+ event.target.responseText +")");
imgArr.push(resJson.data.url);
document.getElementById("proTxt_"+index).innerHTML="上传成功";
setTimeout(() => {
document.getElementById("proTxt_"+index).style.display ="none";
document.getElementById("proLong_"+index).style.display ="none";
}, 500)
}
};
functionuploadFailed(event) {//上传失败
};
};
}
};
fr.readAsDataURL(file);
};
}
传到后台的地址以及成功后处理方法因人而异。
//图片预览
varuploder= {
fileToUpload: document.getElementsByClassName("fileToUpload"),
thumb: document.getElementsByClassName("thumb")
};
imgArr= [];//传到后台的图片
videoUrl='';//传到后台的视频
functionshowPreview(img, index) {
varfile=img.files[0];//当前文件(默认只能单选)
varlen=uploder.fileToUpload.length;
varfileSize=0;
if (file.size >1024*1024) {
fileSize= (Math.round(file.size *100/ (1024*1024)) /100).toString() +'MB';
console.log(fileSize);
} else {
fileSize= (Math.round(file.size *100/1024) /100).toString() +'KB';
console.log(fileSize);
};
if (window.FileReader) {//文件预览
varfr=newFileReader();
fr.onloadend=function (e) {
for (vari=1; i<=len; i++) {
if (i==index) {//当前图片索引
document.getElementById('previewIndex_'+i).src=e.target.result;
varfd=newFormData();
fd.append('file', file);//'file'为传过去的参数(type String)
console.log(file);
varxhrs=newXMLHttpRequest();
xhrs.upload.addEventListener("progress", uploadProgress, false);//监听上传进度
xhrs.addEventListener("load", uploadComplete, false);
xhrs.addEventListener("error", uploadFailed, false);
xhrs.open("POST", 'http://vote.jiugoule.net/index.php?s=app/participate/upload&uid=93&token=b8d3bce08ccd81677f935c2da6e7b4f0&activity_id=2');
xhrs.send(fd);
functionuploadProgress(event) {//上传中
if (index==4) {//添加视频背景图
$(".video-bg").show();
}
if (event.lengthComputable) {
varpercentComplete=Math.round(event.loaded*100/ event.total);
//console.log(document.getElementById("proTxt_" + index),index);
document.getElementById("proTxt_"+index).innerHTML=percentComplete.toString() +'%';
document.getElementById("proLong_"+index).style.height =percentComplete.toString() +'%';
}
};
functionuploadComplete(event) {//上传完成
if (index==4) {//视频(需知道位置)
document.getElementById("proTxt_"+index).innerHTML="视频上传完成,点击更改";
$(".video-select").css({//防止file选择被遮挡
'z-index': 6
});
//return;
varresVideo=eval("("+ event.target.responseText +")");//视频
videoUrl=resVideo.data.url;
} else {
varresJson=eval("("+ event.target.responseText +")");
imgArr.push(resJson.data.url);
document.getElementById("proTxt_"+index).innerHTML="上传成功";
setTimeout(() => {
document.getElementById("proTxt_"+index).style.display ="none";
document.getElementById("proLong_"+index).style.display ="none";
}, 500)
}
};
functionuploadFailed(event) {//上传失败
};
};
}
};
fr.readAsDataURL(file);
};
}