html5 图片上传版本1.0
1、代码如下：
/* autor:shzihouyu date:2015-12-11 ver:1.0 */ var szyFile = { fileDom:null,//html 文件上传控件 preview:null,//图片预览的区域 imgMaxSize:0,//图片大小 filterDom:[],//符合条件的元素 filterImgDataUrl:[],//图片的dataUrl数据 dragArea:null,//拖放区域 imgRegExp:function(f){ if(!/\.(jpg|jpeg|tmp|png|gif)$/i.test(f.name)){ alert('您上传的不是图片,请重新选择后上传！'); return false; } return true; }, isSupport:function(){//浏览器支持情况 if(window.File && window.FileReader && window.FileList && window.Blob) { return true; } else { return false; } }, select:function(e){//图片上传触发 var e = e || window.event; var files = e.target.files || e.dataTransfer.files; for(var i = 0, f; f = files[i]; i++){ if(f){ if(szyFile.imgRegExp(f)){ if(f.size > szyFile.imgMaxSize*1024){ alert('图片过大,您上传的图片大于'+szyFile.imgMaxSize+'KB'); return false; }else{ szyFile.filterDom.push(f); var reader = new FileReader(); reader.onload = (function(){ return function(e){ szyFile.preview.innerHTML = '<img src="'+ this.result +'"/>'; szyFile.filterImgDataUrl.push(encodeURIComponent(this.result)); }; })(f); reader.readAsDataURL(f); } } } } }, dropHandler:function(e){//拖放处理 e.stopPropagation(); e.preventDefault(); szyFile.select(e); }, dragOverHandler:function(e){//拖放效果处理 e.stopPropagation(); e.preventDefault(); e.dataTransfer.dragEffect = 'copy'; }, addDragArea:function(dom){//添加拖放区域 this.dragArea = dom; }, getDataUrl:function(){//返回所有上传图片的列表 return this.filterImgDataUrl; }, getLastDataUrl:function(){//返回最后一个上传的图片 return this.filterImgDataUrl[this.filterImgDataUrl.length-1]; }, getFileList:function(){//返回文件列表 return this.filterDom; }, getFileLast:function(){//返回最后一个文件 return this.filterDom[this.filterDom.length-1]; }, fileOnchange:function(elm){//事件添加 elm.addEventListener('change', this.select, false); }, fileValue:function(){//返回文件的value值 return this.fileDom.value; }, init:function(dom,prev,maxL,dragFlg,dragDom){//file控件 预览区域 图片最大尺寸 是否支持拖拽 拖拽区域 if(dom) this.fileDom = dom; if(prev) this.preview = prev; if(maxL) this.imgMaxSize = maxL; if(this.isSupport()){ this.fileOnchange(dom); if(dragFlg){ if(dragDom){ this.dragArea = dragDom; this.dragArea.addEventListener('drop', this.dropHandler, false); this.dragArea.addEventListener('dragover', this.dragOverHandler, false); } } }else{ alert('请先升级您的浏览器！'); } } }
2、用法如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分段读取文件</title> </head> <body> <input type="file" id="file"/> <div class="prevw"> </div> <div id="drag_area" style="width:300px;height:160px;text-align:center;font-size:20px;color:#333;padding-top:140px;border:4px solid #000;"> <span>把文件拖放到此处上传</span> </div> </body> </html> <script src="szyH5File.js"></script> <script type="text/javascript"> var dom = document.querySelector('#file'); var prev = document.querySelector('.prevw'); var drag = document.querySelector('#drag_area'); szyFile.init(dom,prev,500,true,drag); </script>
