本文实例讲述了JS + html5实现异步上传图片显示上传文件进度条功能。分享给大家供大家参考,具体如下:
& lt; html>
& lt; head>
& lt;/head>
& lt; body>
& lt; p>
emo_album_id: & lt; input type=" text " name=" emo_album_id " id=" emo_album_id " value=' https://www.yisu.com/zixun/1 '比;
& lt;/p>
& lt; p>
名称:& lt;输入类型="文本" name="标题" id=氨晏狻北?
& lt;/p>
& lt; div类="行"比;
& lt;标签=拔募北?
上传图片:& lt;/label>
& lt;输入类型="文件" name=" fileToUpload " id=癴ileToUpload”多个=岸喔觥?比;
& lt;/div>
SentenceMovie(照片)
& lt; div id=拔募北?
& lt;/div>
& lt; div id=拔募笮 北?
& lt;/div>
& lt; div id="文件类型"比;
& lt;/div>
& lt; div id=皃rogressNumber”比;
& lt;/div>
& lt; script>
函数fileSelected () {
var文件=. getelementbyid (fileToUpload) .files [0];
如果(文件){
var文件大?0;
如果文件。大小比;1024 * 1024)
文件大?(Math.round(文件。大小* 100/(1024 * 1024)/100).toString () +“m”;
其他的
文件大?(Math.round(文件。大小* 100/1024)/100).toString() +“知识库”;
. getelementbyid(“文件名”)。innerHTML='名称:' + file.name;
. getelementbyid(“文件大小”)。innerHTML='大小:' +文件大小;
. getelementbyid(“文件类型”)。innerHTML='类型:' + file.type;
还是();
}
}
函数还是(){
var fd=new FormData ();
fd。追加(“upload_file”, . getelementbyid (fileToUpload) .files [0]);
fd。追加(“emo_album_id”, . getelementbyid (emo_album_id) value);
fd。追加(“标题”,. getelementbyid(“标题”)value);
var xhr=new XMLHttpRequest ();
xhr.upload。addEventListener(“进步”,uploadProgress假);
xhr。addEventListener(“负载”,uploadComplete、虚假);
xhr。addEventListener(“错误”,uploadFailed假);
xhr。addEventListener(“中止”,uploadCanceled假);
xhr。打开(“文章”、“http://mysae.com/emotions/1/api/index.php/emo/upload”);
xhr.send (fd);
}
函数uploadProgress (evt) {
如果(evt.lengthComputable) {
var percentComplete=Math.round (evt)。加载* 100/evt.total);
. getelementbyid (“progressNumber”)。innerHTML=percentComplete.toString () +‘%’;
}
其他{
. getelementbyid (“progressNumber”)。innerHTML=无法计算的;
}
}
函数uploadComplete (evt) {/*这个事件时提高服务器发回一个响应*/警报(evt.target.responseText);
}
函数uploadFailed (evt) {
alert("试图上传的文件有一个错误。”);
}
函数uploadCanceled (evt) {
alert("上传取消了由用户或浏览器连接下降。”);
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript + HTML5特效与技巧汇总》、《JavaScript图片操作技巧大全》,《JavaScript图形绘制技巧总结》,《JavaScript错误与调试技巧总结》,《JavaScript数据结构与算法技巧总结》,《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
