这是在上篇的修改版本。后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的JavaScript 代码,所以我们主要看JS代码。
先介绍一下技术参数:
页面技术:HTML5
后台技术:Servlet 3.0
服务器:Tomcat 7.0
脚本:JavaScript
HTML5 file组件的新属性
accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了,实在是很方便。
multiple:是否允许选择多个文件
HTML5 页面代码修改后
<img width="400" height="250"/><br /> <input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/> <input type="button" value="上传图片" onclick="uploadFile()" /><br /> <div id="parent"> <div id="son"></div> </div>
accept 的值可以参阅:IANA MIME 类型(标准 MIME 类型的完整列表),如果使用的是DW开发的话,软件本身就有提示。
如果选择了多个文件,可以用JS做循环打印,看看文件的名称,类型和大小,看演示代码
function printFileInfo(){ var picFile = document.getElementById("pic"); var files = picFile.files; for(var i=0; i<files.length; i++){ var file = files[i]; var div = document.createElement("div") div.innerHTML = "第("+ (i+1) +") 个文件的名字:"+ file.name + " , 文件类型:"+ file.type +" , 文件大小:"+ file.size document.body.appendChild( div) } }
既然可以循环多文件的话,就可以尝试多文件上传了。
1、首先创建 XMLHttpRequest 对象
//这是全局变量。因为是示例,所以就没有判断浏览器类型,低版本IE这么写的话会出问题的
var xhr = new XMLHttpRequest()
2、上篇介绍了进度事件(Progress) , 这次实现 progress 和 error 2个事件
error:在请求发生错误时触发。
对应上传时发生错误导致的上传失败:uploadFailed()
//上传失败 function uploadFailed(evt) { alert("上传失败"); } progress:在接收相应期间持续不断触发。 对应上传进度方法:onprogress() /** * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次 */ function onprogress(evt){ var loaded = evt.loaded; //已经上传大小情况 var tot = evt.total; //附件总大小 var per = Math.floor(100*loaded/tot); //已经上传的百分比 $("#son").html( per +"%" ); $("#son").css("width" , per +"%"); }
最后就是上传方法了,注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。
//上传文件 function uploadFile() { //将上传的多个文件放入formData中 var picFileList = $("#pic").get(0).files; var formData = new FormData(); for(var i=0; i< picFileList.length; i++){ formData.append("file" , picFileList[i] ); } //监听事件 xhr.upload.addEventListener("progress", onprogress, false); xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数 xhr.open("POST", "upload"); //记得加入上传数据formData xhr.send(formData); }
PS: 这毕竟只是基本功能的演示示例,离公司使用的要求还相差十万八千里,请谨慎在公司平台使用。
大家可以结合这篇文章进行学习:基于HTML5 Ajax文件上传进度条如何实现(jquery版本)
以上就是本文的全部内容,希望对大家的学习有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 黄乙玲1988-无稳定的爱心肝乱糟糟[日本东芝1M版][WAV+CUE]
- 群星《我们的歌第六季 第3期》[320K/MP3][70.68MB]
- 群星《我们的歌第六季 第3期》[FLAC/分轨][369.48MB]
- 群星《燃!沙排少女 影视原声带》[320K/MP3][175.61MB]
- 乱斗海盗瞎6胜卡组推荐一览 深暗领域乱斗海盗瞎卡组分享
- 炉石传说乱斗6胜卡组分享一览 深暗领域乱斗6胜卡组代码推荐
- 炉石传说乱斗本周卡组合集 乱斗模式卡组最新推荐
- 佟妍.2015-七窍玲珑心【万马旦】【WAV+CUE】
- 叶振棠陈晓慧.1986-龙的心·俘虏你(2006复黑限量版)【永恒】【WAV+CUE】
- 陈慧琳.1998-爱我不爱(国)【福茂】【WAV+CUE】
- 咪咕快游豪礼放送,百元京东卡、海量欢乐豆就在咪咕咪粉节!
- 双11百吋大屏焕新“热”,海信AI画质电视成最大赢家
- 海信电视E8N Ultra:真正的百吋,不止是大!
- 曾庆瑜1990-曾庆瑜历年精选[派森][WAV+CUE]
- 叶玉卿1999-深情之选[飞图][WAV+CUE]