JS+html5实现异步上传图片显示上传文件进度条功能示例
2019-12-02 18:11
1136 查看
本文实例讲述了JS+html5实现异步上传图片显示上传文件进度条功能。分享给大家供大家参考,具体如下:
<html> <head> </head> <body> <p> emo_album_id:<input type="text" name="emo_album_id" id="emo_album_id" value='1'> </p> <p> name:<input type="text" name="title" id="title"> </p> <div class="row"> <label for="file"> Upload Image:</label> <input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" onchange="fileSelected();" /> </div> SentenceMovie[photo] <div id="fileName"> </div> <div id="fileSize"> </div> <div id="fileType"> </div> <div id="progressNumber"> </div> <script> function fileSelected() { var file = document.getElementById('fileToUpload').files[0]; if (file) { var fileSize = 0; if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; document.getElementById('fileName').innerHTML = 'Name: ' + file.name; document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize; document.getElementById('fileType').innerHTML = 'Type: ' + file.type; uploadFile(); } } function uploadFile() { var fd = new FormData(); fd.append("upload_file", document.getElementById('fileToUpload').files[0]); fd.append("emo_album_id", document.getElementById('emo_album_id').value); fd.append("title", document.getElementById('title').value); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); xhr.open("POST", "http://mysae.com/emotions/1/api/index.php/emo/upload"); xhr.send(fd); } function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; } else { document.getElementById('progressNumber').innerHTML = 'unable to compute'; } } function uploadComplete(evt) { /* This event is raised when the server send back a response */ alert(evt.target.responseText); } function uploadFailed(evt) { alert("There was an error attempting to upload the file."); } function uploadCanceled(evt) { alert("The upload has been canceled by the user or the browser dropped the connection."); } </script> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript+HTML5特效与技巧汇总》、《JavaScript图片操作技巧大全》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- html5异步上传图片显示上传文件进度条
- HTML5_纯JS实现上传文件显示文件大小,文件信息,上传进度_不使用JS库
- JS实现批量上传文件并显示进度功能
- 基于HTML5 Ajax实现文件上传并显示进度条
- js+HTML5实现图片粘贴上传功能
- 基于SpringMVC+Bootstrap实现图片异步上传进度显示
- 完美实现 IE10 下利用HTML5实现文件上传(图片上传)功能
- ajax实现文件异步上传并回显文件相关信息功能示例
- Struts2+JQuery.uploadify插件实现带进度的多文件上传示例【也可以设置去掉进度条的显示】
- HTML5实现图片文件异步上传
- 使用Html5实现异步上传文件,支持跨域,带有上传进度条
- HTML5实现图片文件异步上传
- HTML5实现图片文件异步上传
- ajax实现异步文件(图片)上传功能
- vue实现的上传图片到数据库并显示到页面功能示例
- HTML5实现文件上传进度条显示
- 一键jquery异步上传文件(图片)的实现(文件上传进度读取未做)
- 用Struts2实现文件上传时显示进度条功能
- ajax实现异步文件或图片上传功能