星空网 > 软件开发 > Java

上传图片(基于zepto.js)

效果如下:

上传图片(基于zepto.js)

上传图片(基于zepto.js)上传图片(基于zepto.js)
1   <div class="otherPic">2               <div id="showOtherImage"></div>3               <span class="pull-left position_relative" id="openIdCardImg">4                 <span class="icon color-blue addPic">&#xe647;</span>5                 <input type="file" class="yy_inputFile" id="other_inputFile" name="reasonImg" />6               </span>7             </div>

html
 1 .basicInfo .item{ padding:.5rem .5rem 0; border-top:.3rem solid #eeeeee;} 2 .basicInfo li{ overflow:hidden; margin-bottom:.5rem;line-height:2.1rem; border-bottom:1px solid #e3e3e3;} 3 .basicInfo li:last-child{ border-bottom:none;} 4 .basicInfo input[type="text"]{ height:2rem; line-height:2rem;} 5 .basicInfo textarea{ height:8rem; line-height:1.5rem;} 6 .basicInfo .otherPic{ min-height:3rem;} 7 .basicInfo .otherPic .addPic{ height:3rem; line-height:3rem; font-size:3rem; margin-bottom:.5rem;} 8 .basicInfo .otherPic img{ margin:0 .5rem .5rem 0; width:3rem; height:3rem; vertical-align:top; border:1px solid #ddd;} 9 .basicInfo .yy_inputFile{ position:absolute; top:0; left:0; width:3rem; height:3rem; opacity:0;}10 .basicInfo .aboutPic{ margin-bottom:.5rem; line-height:1.5rem; }

js:

 1   var img_arr = new Array(); 2     //相关图片 3     $(page).on('change','#other_inputFile',function () { 4       $(this).resizeImage({ 5         that:this, 6         cutWid:'', 7         quality:0.6, 8         limitWid:710, 9         success:function (data) { 10           var len = $('#showOtherImage').find('img').size(); 11           img_arr[len] = data.base64; 12           var img = '<div >' + 13             '<img src='/images/loading.gif' data-original="' + img_arr[len] + '">' + 14             '<span sid="' +len+ '" id="other_img_'+len+'">&#xe645;</span>'+ 15             '</div>'; 16           $('#showOtherImage').append(img); 17           if(img_arr.length == 9){ 18             $('#openIdCardImg').hide(); 19             return false; 20           } 21         } 22       }); 23       this.value = ''; 24     }); 25  26     //删除相关图片 27     $(page).on('click','.deletedImages',function () { 28       var sid = $(this).attr('sid'); 29  30       img_arr.splice(sid,1); 31       $(this).parent().remove(); 32  33       $('#showOtherImage').html(''); 34       for( var i=0; i < img_arr.length; i++) { 35         var img = '<div >' + 36           '<img src='/images/loading.gif' data-original="' + img_arr[i] + '">' + 37           '<span sid="' +i+ '" id="other_img_' +i+ '">&#xe645;</span>'+ 38           '</div>'; 39         $('#showOtherImage').append(img); 40       } 41  42       if(img_arr.length < 9){ 43         $('#openIdCardImg').show(); 44       }else{ 45         $('#openIdCardImg').hide(); 46       } 47     }); 48  49 /* 50   * 裁剪图片 51   * $(id).resizeImage({ 52    * that:this,  //当前图片对象 53    * cutWid:'',  //裁剪尺寸 54    * quality:0.6,  //图片质量0~1 55    * limitWid:400,  //最小宽度 56    * success:function (data) { 57    *   do something...    58    * } 59   * }) 60   * 61   * */ 62   $.fn.resizeImage = function (obj) { 63     var file = obj.that.files[0]; 64     var URL = window.URL || window.webkitURL; 65     var blob = URL.createObjectURL(file); 66     var base64; 67  68     var img = new Image(); 69     img.src = blob; 70  71     if(!/image\/\w+/.test(obj.that.files[0].type)){ 72       $.toast("请上传图片!",1000); 73       return false; 74     } 75  76     img.onload = function() { 77       if(img.width < obj.limitWid){ 78         $.toast('图片宽度不得小于'+ obj.limitWid +'px',1000); 79         return false; 80       } 81       var that = this; 82  83       //生成比例 84       var w,scale,h = that.height; 85       if(obj.cutWid == ''){ 86         w = that.width; 87       }else{ 88         w = obj.cutWid; 89       } 90       scale = w / h; 91       h = w / scale; 92  93       //生成canvas 94       var canvas = document.createElement('canvas'); 95       var ctx = canvas.getContext('2d'); 96       $(canvas).attr({ 97         width: w, 98         height: h 99       });100       ctx.drawImage(that, 0, 0, w, h);101 102       // 生成base64103       base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);104       var result = {105         base64:base64106       };107 108       //成功后的回调109       obj.success(result);110     };111   };

 




原标题:上传图片(基于zepto.js)

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

轻则改单重则罚金!运提单原来这么关键!:https://www.ikjzd.com/articles/110005
干货:亚马逊账号注册常见问题汇总!:https://www.ikjzd.com/articles/110006
央行发布公开市场业务交易公告:突然“降息”!:https://www.ikjzd.com/articles/110007
菲律宾新的百亿美金级电商市场:https://www.ikjzd.com/articles/110008
年满30岁的90后,还适合做亚马逊吗?:https://www.ikjzd.com/articles/110009
旺季爆单只能降价打折?店铺产品组合销售策略教你玩转年终旺季!:https://www.ikjzd.com/articles/11001
皇帝的皇宫=:https://www.vstour.cn/a/363188.html
海南岛琼海市旅游景点 琼海市的旅游景点:https://www.vstour.cn/a/363189.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流