帮忙跨域,移动端HTML5贯彻文件上传作用

移步端HTML5贯彻文件上传作用【附代码】,

PC端上传文件多半用插件,引进flash都没事儿,可是运动端借使还用各类冗余的插件猜想得被喷死,项目里面要求做图片上传的效果,既然H5已经有连带的接口且兼容性优秀,当然优先思虑用H5来落到实处。

用的手艺首若是:

ajax
FileReader
FormData

HTML结构:

JavaScript Code复制内容到剪贴板

  1. <div class=”camera-area”>   
  2.       <form enctype=”multipart/form-data” method=”post”>   
  3.         <input type=”file” name=”fileToUpload” class=”fileToUpload” accept=”image/*” capture=”camera”/>   
  4.           <div class=”upload-progress”><span></span></div>
      
  5.         </form>   
  6.       <div class=”thumb”></div>   
  7.   </div>  

业已封装好的upload.js,信赖zepto

JavaScript Code复制内容到剪贴板

  1. (function($) {   
  2.   $.extend($.fn, {   
  3.     fileUpload: function(opts) {   
  4.       this.each(function() {   
  5.         var $self = $(this);   
  6.         var doms = {   
  7.           “fileToUpload”: $self.find(“.fileToUpload”),   
  8.           “thumb”: $self.find(“.thumb”),   
  9.           “progress”: $self.find(“.upload-progress”)   
  10.         };   
  11.         var funs = {   
  12.           //接纳文件,获取文件大小,也得以在那边获得文件格式,限制用户上传非须要格式的文书
      
  13.           “fileSelected”: function() {   
  14.             var files = (doms.fileToUpload)[0].files;
      
  15.             var count = files.length;
      
  16.             for (var index = 0; index < count; index++) {
      
  17.               var file = files[index];   
  18.               var fileSize = 0;   
  19.               if (file.size > 1024 * 1024)   
  20.                 fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + ‘MB’;   
  21.               else  
  22.                 fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + ‘KB’;   
  23.             }   
  24.             funs.uploadFile();   
  25.           },   
  26.           //异步上传文件   
  27. 帮忙跨域,移动端HTML5贯彻文件上传作用。          uploadFile: function() {   
  28.             var fd = new FormData();//创制表单数据对象   
  29.             var files = (doms.fileToUpload)[0].files;
      
  30.             var count = files.length;
      
  31.             for (var index = 0; index < count; index++) {
      
  32.               var file = files[index];   
  33.               fd.append(opts.file, file);//将文件加多到表单数据中   
  34.               funs.previewImage(file);//上传前预览图片,也得以由此任何办法预览txt
      
  35.             }   
  36.             var xhr = new XMLHttpRequest();   
  37.             xhr.upload.add伊芙ntListener(“progress”, funs.uploadProgress, false);//监听上传进度  
  38.             xhr.addEventListener(“load”, funs.uploadComplete, false);   
  39.             xhr.addEventListener(“error”, opts.uploadFailed, false);   
  40.             xhr.open(“POST”, opts.url);
      
  41.             xhr.send(fd);   
  42.           },   
  43.           //文件预览   
  44.           previewImage: function(file) {   
  45.             var gallery = doms.thumb;
      
  46.             var img = document.createElement(“img”);   
  47.             img.file = file;   
  48.             doms.thumb.html(img);   
  49.             // 使用FileReader方法展现图片内容
      
  50.             var reader = new FileReader();   
  51.             reader.onload = (function(aImg) {   
  52.               return function(e) {   
  53.                 aImg.src = e.target.result;   
  54.               };   
  55.             })(img);   
  56.             reader.readAsDataURL(file);   
  57.           },   
  58.           uploadProgress: function(evt) {   
  59.             if (evt.lengthComputable) {
      
  60.               var percentComplete = Math.round(evt.loaded * 100 / evt.total);
      
  61.               doms.progress.html(percentComplete.toString() + ‘%’);   
  62.             }   
  63.           },   
  64.           “uploadComplete”: function(evt) {   
  65.             alert(evt.target.responseText)   
  66.           }   
  67.         };   
  68. 帮忙跨域,移动端HTML5贯彻文件上传作用。        doms.fileToUpload.on(“change”, function() {   
  69.           doms.progress.find(“span”).width(“0”);   
  70.           funs.fileSelected();   
  71.         });   
  72.       });   
  73.     }   
  74.   });   
  75. })(Zepto);  

调用方法:

JavaScript Code复制内容到剪贴板

  1. $(“.camera-area”).fileUpload({   
  2.         “url”: “savetofile.php”,   
  3.         “file”: “myFile”  
  4.       });  

PHP部分:

PHP Code复制内容到剪贴板

  1. <?php   
  2. if (isset($_FILES[‘myFile’])) {   
  3.     // Example:   
  4.     writeLog($_FILES);   
  5.     move_uploaded_file($_FILES[‘myFile’][‘tmp_name’], “uploads/” . $_FILES[‘myFile’][‘name’]);   
  6.     echo ‘successful’;   
  7. }   
  8. function writeLog($log){   
  9.     if(is_array($log) || is_object($log)){   
  10.         $log = json_encode($log);   
  11.     }   
  12.     $log = $log.”\r\n”;   
  13.   
  14.     file_put_contents(‘log.log’, $log,FILE_APPEND);   
  15. }   
  16. ?>  

点击这里下载源码

上述那篇移动端HTML5贯彻文件上传功用【附代码】正是作者分享给大家的全体内容了,希望能给我们二个参照,也冀望大家多多援救帮客之家。

原来的小说地址:

PC端上传文件多半用插件,引进flash都没事儿,可是运动端就算还用各样冗余的插件估摸得被喷死…

上周帮其余企业套一下一个web端微信投票系统的后台接口,际遇了一个图形以及录像上传报名的未有毛病,英特网完结格局有为数十分多但都不是ui下面的效果与利益,于是本身入手改换了贰个。先来拜访效果图

浓密钻探HTML5兑现图片压缩上传效用,

上篇文章中涉嫌移动端上传图片,我们精晓以后流量照旧挺贵的,手提式有线电话机的像素是更高,拍个照动不动正是好几M,伤不起。纵然客户端可以轻易完结图片压缩再上传,但是大家的行使还恐怕在浏览器里面张开,怎么做吧,图片压缩。受在此之前PC上的开销怀恋影响,尼玛js哪有权力去操作文件,哪有身份削减图片啊,搞不了,你们客户端去整吧。只可以说自身如故某个孤陋寡闻了。在HTML5的震慑下,前端能干的专门的工作更是多了,开拓的效用逼格也愈加高了,H5万岁!前端的吸重力也在那,过去不容许的并不意味着现在、未来不可能,努力吗,骚年!

js怎么减少图片???潜意识里的确一同初是认为完结持续,后来阅读资料,研商了下,开掘可行!搞起!

先说说H5此前笔者们怎么上传,一般是依赖插件、flash只怕差十分的少三个文本form表单,少操相当多心。

从今有了H5,组长再也不担忧本人的支付了。

上篇小说提到图片上传用到了FileReader,FormData,实际上根本用那八个大家基本能实现图片的预览和上传了。完结图片压缩,我们要求借助canvas,是的,正是canvas!

粗粗思路是:

1、制造一个图片和贰个canvas

XML/HTML Code复制内容到剪贴板

  1. var image = new Image(),   
  2. canvas = document.createElement(“canvas”),   
  3. ctx = canvas.getContext(‘2d’);  

2、大家将input中甄选的图样地址通过FileReader获取后赋给新建的图样对象,然后将图片对象丢到canvas画布上。

XML/HTML Code复制内容到剪贴板

  1. var file = obj.files[0];   
  2.                         var reader = new FileReader();//读取客户端上的文书
      
  3.                         reader.onload = function() {   
  4.                             var url = reader.result;//读取到的文本内容.那本性情只在读取操作达成之后才有效,何况数据的格式取决于读取操作是由哪位方法发起的.所以必须运用reader.onload,
      
  5.                             image.src=url;//reader读取的文书内容是base64,利用这几个url就会落到实处上传前预览图片
      
  6.                             …   
  7.                         };   
  8.                         image.onload = function() {   
  9.                             var w = image.naturalWidth,   
  10.                                 h = image.naturalHeight;   
  11.                             canvas.width = w;   
  12.                             canvas.height = h;   
  13.                             ctx.drawImage(image, 0, 0, w, h, 0, 0, w, h);
      
  14.                             fileUpload();   
  15.                         };   
  16.                         reader.readAsDataURL(file);  

此地供给小心的是,canvas将图片画到画布上的时候必要鲜明canvas的尺寸,同一时间设定好drawImage的参数,具体如下:

XML/HTML Code复制内容到剪贴板

  1. void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);  

皇家赌场手机版 1

dx源图像的左上角在对象canvas上 X 轴的岗位。

dy源图像的左上角在目的canvas上 Y 轴的地点。

dWidth在对象canvas上绘制图像的肥瘦。 允许对绘制的图像举办缩放。
要是不表明, 在绘制时图片宽度不会缩放。

dHeight在对象canvas上制图图像的万丈。 允许对绘制的图像举办缩放。
如若不表达, 在绘制时图片中度不会缩放。

sx亟待绘制到对象上下文中的,源图像的矩形采取框的左上角 X 坐标。

sy急需绘制到对象上下文中的,源图像的矩形选用框的左上角 Y 坐标。

sWidth急需绘制到对象上下文中的,源图像的矩形选择框的肥瘦。若是不表达,整个矩形从坐标的sx和sy早先,到图像的右下角停止。

sHeight亟待绘制到对象上下文中的,源图像的矩形选取框的莫大。

为了上传完整的图纸,这里dx,dy必须安装为0,dWidth和dHeight必须设置为本来图片的增长幅度和惊人。这就是为啥大家需求等image对象下载完毕后得到其原始尺寸,那相当重大!

3、图片上传

XML/HTML Code复制内容到剪贴板

  1. function fileUpload() {   
  2.      var data = canvas.toDataURL(“image/jpeg”, quality);
      
  3.      //dataUPAJEROL 的格式为 “data:image/png;base64,****”,逗号以前都以有个别讲明性的文字,大家只须要逗号之后的就行了
      
  4.     datadata = data.split(‘,’)[1];   
  5.     data = window.atob(data);   
  6.     var ia = new Uint8Array(data.length);   
  7.     for (var i = 0; i < data.length; i++) {   
  8.           ia[i] = data.charCodeAt(i);   
  9.     };   
  10.      //canvas.toDataULX570L 再次回到的暗中认可格式正是 image/png   
  11.     var blob = new Blob([ia], {   
  12.      type: “image/jpeg”   
  13.     });   
  14.     var fd = new FormData();   
  15.         fd.append(‘myFile’, blob);   
  16.     var xhr = new XMLHttpRequest();   
  17.     xhr.addEventListener(“load”, opts.success, false);   
  18.     xhr.addEventListener(“error”, opts.error, false);   
  19.     xhr.open(“POST”, opts.url);   
  20.     xhr.send(fd);   
  21.  }  

此间用的基本点措施是canvas.toDataU帕杰罗L

XML/HTML Code复制内容到剪贴板

  1. canvas.toDataURL(type, encoderOptions);  

官方的印证是The HTMLCanvasElement.toDataURL() method returns
a data URI containing a representation of the image in the format
specified by the type parameter (defaults to PNG). The returned image
is in a resolution of 96
dpi.实际上就是读取canvas画布上海教室片的数量。其默许是png格式,倘诺第二个参数type是image/jpeg的话,首个参数encoderOptions就能够用来安装图片的缩减品质,经过测验,若是是png格式,百分百的宽MediaTek过该方法还会有相当的大可能率使图片变大~~~~壮志未酬,所以我们可以在canvas.drawImage的时候方便设置sWidth和sHeight,譬仿佛期比较例收缩1.5倍等,图片品质实际并不太影响查看,越发对尺寸极大的图样来讲。

下边还大概有相比较不熟悉的秘技atob,其职能是做解码,因为图片格式的base64.

XML/HTML Code复制内容到剪贴板

  1. var encodedData = window.btoa(“Hello, world”); // encode a string
      
  2. var decodedData = window.atob(encodedData); // decode the string  

该格局解码出来也许是一批乱码,Uint8Array回去的是8进制整型数组。

Blob是积累二进制文件的器皿,标准的Blob对象是一个图纸或许声音文件,其暗中同意是PNG格式。

XML/HTML Code复制内容到剪贴板

  1. var blob = new Blob([ia], {   
  2.      type: “image/jpeg”   
  3.     });  

末尾经过ajax将Blob对象发送到server就可以。

漫天流程大约如上,然则~~~实现今后测量试验跑来讲:“你不是说图片压缩了啊,为何图片照旧上传那么慢!”,哥拿起手提式有线电话机对妹纸演示了刹那间,明明不慢嘛,于是反道“是你手提式有线电话机不行大概互联网不好啊,你下载图片看了然变小了,比在此以前一定快,你看小编秒传”。呵呵,说归说,还是背后检查代码,在浏览器中打时间log,相比较没压缩此前的,尼玛!!!居然才快了几百纳秒!!折腾了半天,从前的代码也重构了,玩本人吗。

有心人的大神看了地点的代码估算能猜出标题在哪,没有错,赢得本地图片长度宽度尺寸的时候出了难题。

皇家赌场手机版 2

本人去,获取本地4M大大小小的图片尺寸花了3174ms!!,图片越大日子也越久~

JavaScript Code复制内容到剪贴板

  1. image.onload = function() {   
  2.         var w = image.naturalWidth,   
  3.           h = image.naturalHeight;   
  4.         canvas.width = w / 1.5;   
  5.         canvas.height = h / 1.5;   
  6.         ctx.drawImage(image, 0, 0, w, h, 0, 0, w / 1.5, h / 1.5);   
  7.         Upload.fileUpload(type);   
  8. };  

浏览器在地头取图片的时候是无语直接像file.size一样获得其长度宽度的,只可以通过FileReader获得内容后赋值给新建的image对象,新建的image对象下载必要时间!怎么破?不正是猎取本地图片的尺寸吗,难道没有别的艺术了?

于是乎想到了事先研讨过的迅速取得图片长宽的博文,点击走入
,demo地址:

测了下,依旧不行,因为定期查询这种格局对寻常的server再次回到的图形有效果,这里图片地址是base64,貌似时间还越来越久了~哭。

计算一下:

1、用HTML5来压缩图片上传是可行的,在活动端大家决不注重客户端可能插件,前段时间主流浏览器帮衬程度早就相当高了。

2、压缩图片一方面是想收缩用户上传等待的年月,别的也缩减用户为此捐躯的流量,从总体时间来看,因为获取图片尺寸导致多三次下载供给耗费时间,其实压不减价扣时间距离并非专程大。除非大神们找到适当的法子能够一向获得图片的尺寸,麻烦也告知自个儿一声,卓越感激;

3、既然时间资金财产比比较多,可是大家裁减了图片,裁减了图片的尺寸,减弱了流量的耗费,存储空间以及后一次获得该图片的时刻,所以依然值得的。

 补给源代码:

JavaScript Code复制内容到剪贴板

  1. (function($) {   
  2.     $.extend($.fn, {   
  3.         fileUpload: function(opts) {   
  4.             this.each(function() {   
  5.                 var $self = $(this);   
  6.                 var quality = opts.quality ? opts.quality / 100 : 0.2;
      
  7.                 var dom = {   
  8.                     “fileToUpload”: $self.find(“.fileToUpload”),   
  9.                     “thumb”: $self.find(“.thumb”),   
  10.                     “progress”: $self.find(“.upload-progress”)   
  11.                 };   
  12.                 var image = new Image(),   
  13.                     canvas = document.createElement(“canvas”),   
  14.                     ctx = canvas.getContext(‘2d’);   
  15.                 var funs = {   
  16.                     setImageUrl: function(url) {   
  17.                         image.src = url;   
  18.                     },   
  19.                     bindEvent: function() {   
  20.                         console.log(dom.fileToUpload)   
  21.                         dom.fileToUpload.on(“change”, function() {   
  22.                             funs.fileSelect(this);   
  23.                         });   
  24.                     },   
  25.                     fileSelect: function(obj) {   
  26.                         var file = obj.files[0];   
  27.                         var reader = new FileReader();   
  28.                         reader.onload = function() {   
  29.                             var url = reader.result;   
  30.                             funs.setImageUrl(url);   
  31.                             dom.thumb.html(image);   
  32.                         };   
  33.                         image.onload = function() {   
  34.                             var w = image.naturalWidth,   
  35.                                 h = image.naturalHeight;   
  36.                             canvas.width = w;   
  37.                             canvas.height = h;   
  38.                             ctx.drawImage(image, 0, 0, w, h, 0, 0, w, h);
      
  39.                             funs.fileUpload();   
  40.                         };   
  41.                         reader.readAsDataURL(file);   
  42.                     },   
  43.                     fileUpload: function() {   
  44.                         var data = canvas.toDataURL(“image/jpeg”, quality);   
  45.                         //dataU途乐L 的格式为 “data:image/png;base64,****”,逗号在此以前都是部分表明性的文字,大家只须要逗号之后的就行了
      
  46.                         data = data.split(‘,’)[1];   
  47.                         data = window.atob(data);   
  48.                         var ia = new Uint8Array(data.length);   
  49.                         for (var i = 0; i < data.length; i++) {   
  50.                             ia[i] = data.charCodeAt(i);   
  51.                         };   
  52.                         //canvas.toDataU传祺L 重回的暗中同意格式正是 image/png
      
  53.                         var blob = new Blob([ia], {   
  54.                             type: “image/jpeg”  
  55.                         });   
  56.                         var fd = new FormData();   
  57.                         fd.append(‘myFile’, blob);   
  58.                         var xhr = new XMLHttpRequest();   
  59.                         xhr.addEventListener(“load”, opts.success, false);   
  60.                         xhr.addEventListener(“error”, opts.error, false);   
  61.                         xhr.open(“POST”, opts.url);   
  62.                         xhr.send(fd);   
  63.                     }   
  64.                 };   
  65.                 funs.bindEvent();   
  66.             });   
  67.         }   
  68.     });   
  69. })(Zepto);  

调用形式:

JavaScript Code复制内容到剪贴板

  1. $(“.fileUpload”).fileUpload({   
  2.                 “url”: “savetofile.php”,   
  3.                 “file”: “myFile”,   
  4.                 “success”:function(evt){   
  5.                     console.log(evt.target.responseText)   
  6.                 }   
  7. });  

希望大家能找到更加好的秘籍,多多沟通!感激!

如上那篇尖锐商讨HTML5贯彻图片压缩上传作用便是小编分享给我们的全体内容了,希望能给大家贰个参阅,也盼望大家多多帮忙帮客之家。

原稿地址:

上篇小说中涉嫌移动端上传图片,我们明白今后流量还是挺贵的,手提式有线电电话机的像素是尤为高,拍个照动…

动用Html5贯彻异步上传文件,帮忙跨域,带有上传进度条,

服务器打算IIS

内需安装IIS里面包车型客车HTTP响应标头,如图增加如下设置,增多那项“Access-Control-Allow-Origin”,唯有增添了那行技能补助跨域,不然像Chrome浏览器会报错

皇家赌场手机版 3

皇家赌场手机版 4

页面代码:

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv=”content-type” content=”text/html;charset=utf-8″>  
  5.     <meta name=”format-detection” content=”telephone=no”>  
  6.     <meta name=”msapplication-tap-highlight” content=”no”>  
  7.     <meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width”>  
  8.     <title>Html5上传文件</title>  
  9. </head>  
  10. <body>  
  11.     <div class=”app”>  
  12.         <h1>Html5上传文件测验,带进程条</h1>  
  13.         <div>  
  14.             <input type=”file” value=”” id=”fileInput” name=”files” onchange=”fileSelected()” />  
  15.             <div style=”margin:30px;”>  
  16.                 <input type=”button” value=”上传” onclick=”uploadFile()” />  
  17.             </div>  
  18.             <div style=”margin:30px;”>  
  19.                 <div id=”fileName”></div>  
  20.                 <div id=”fileSize”></div>  
  21.                 <div id=”fileType”></div>  
  22.             </div>  
  23.             <div style=”margin:30px;width:500px;height:15px;border:1px solid #aeaeae;”>  
  24.                 <div id=”progress” style=”background:#4cff00;height:15px;width:0%;”></div>  
  25.                 <div id=”percentNumber”></div>  
  26.             </div>  
  27.             <div style=”margin:30px;”>  
  28.                 <div id=”msg”></div>  
  29.             </div>  
  30.         </div>  
  31.     </div>  
  32.     <script type=”text/javascript”>  
  33.         function fileSelected() {   
  34.             //复位状态呈现   
  35.             document.getElementById(“msg”).innerHTML = “”;   
  36.             document.getElementById(‘percentNumber’).innerHTML = ”;   
  37.             document.getElementById(“progress”).style.width = “0%”;   
  38.             var file = document.getElementById(‘fileInput’).files[0];
      
  39.             if (file) {   
  40.                 var fileSize = 0;   
  41.                 if (file.size > 1024 * 1024)   
  42.                     fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + ‘MB’;
      
  43.                 else   
  44.                     fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + ‘KB’;
      
  45.                 document.getElementById(‘fileName’).innerHTML = ‘Name: ‘ + file.name;   
  46.                 document.getElementById(‘fileSize’).innerHTML = ‘Size: ‘ + fileSize;   
  47.                 document.getElementById(‘fileType’).innerHTML = ‘Type: ‘ + file.type;   
  48.             }   
  49.         }   
  50.   
  51.   
  52.         function uploadFile() {   
  53.             var fd = new FormData();   
  54.             fd.append(“fileInput”, document.getElementById(‘fileInput’).files[0]);
      
  55.             var xhr = new XMLHttpRequest();   
  56.             xhr.upload.addEventListener(“progress”, uploadProgress, false);
      
  57.             xhr.addEventListener(“load”, uploadComplete, false);   
  58.             xhr.addEventListener(“error”, uploadFailed, false);   
  59.             xhr.addEventListener(“abort”, uploadCanceled, false);            
      
  60.             xhr.open(“POST”, ”
      
  61.             //xhr.setRequestHeader(“Access-Control-Allow-Origin”, “*”);//供给在IIS里面配备,就足以跨域恳求了
      
  62.             //xhr.setRequestHeader(“Content-Type”, “multipart/form-data”);
      
  63.             xhr.send(fd);   
  64.         }   
  65.         function uploadProgress(evt) {   
  66.             if (evt.lengthComputable) {   
  67.                 var percentComplete = Math.round(evt.loaded * 100 / evt.total);
      
  68.                 document.getElementById(‘percentNumber’).innerHTML = percentComplete + ‘%’;   
  69.                 var jindutiao = document.getElementById(“progress”);
      
  70.                 jindutiao.style.width = percentComplete + “%”;   
  71.             }   
  72.             else {   
  73.                 document.getElementById(‘percentNumber’).innerHTML = ‘不援救进程计算’;   
  74.             }   
  75.         }   
  76.         function uploadComplete(evt) {   
  77.             //evt.target.responseText   
  78.             document.getElementById(“msg”).innerHTML = “上传成功”;   
  79.         }   
  80.         function uploadFailed(evt) {   
  81.             document.getElementById(“msg”).innerHTML = “上传进程中有三个荒唐”;   
  82.         }   
  83.         function uploadCanceled(evt) {   
  84.             document.getElementById(“msg”).innerHTML = “用户撤除了上传或许浏览器删除了连续”;
      
  85.         }   
  86.     </script>  
  87. </body>  
  88. </html>  

如上那篇使用Html5落到实处异步上传文件,扶助跨域,带有上传进程条正是笔者共享给大家的全体内容了,希望能给我们二个参照,也期待大家多多扶助帮客之家。

服务器盘算IIS
必要安装IIS里面包车型地铁HTTP响应标头,如图增多如下设置,增加那项Acces…

皇家赌场手机版 5

流程很简短,便是点击每叁个加号浏览本地图片并规定后会自动发送一个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”,
”);

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”,
”);

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);

};

}

Leave a Comment.