上传图片

html:

<div class="aboutimg">
                            <div id="addImg" class="zbtn pointer">上传</div>
                            <form enctype="multipart/form-data" action="http://192.168.1.188:8037/upload" id="formExcel" type="text" method="post" class="formExcel">
                                <input class="span" type="hidden" name="token" value="4e515b0fca06aab0743d60f9896aa605">
                                <input type="file" name="file" size="30" class="upimage upfile" id="upfile1">
                            </form>
                            <div class="remind">图片格式支持JPG,PNG与GIF,大小不超过2M</div>
                            <ul class="img_tiltes"></ul>
                        </div>

js:

//上传图片
         picturefile:function(){
             $('.upfile').each(function(i){
                 var mask = $(this).parents(".mask");

                 var thats = $(this);

                 $(this).off().on('change',function(){
                     console.log($(".img_tiltes").html());
                     console.log( $(this));
                     console.log($(".img_tiltes li").length+":"+$(".img_tiltes").html())
                     if($(".img_tiltes li").length  <=4){
                         var img = document.createElement("img");

                         var file = document.getElementsByClassName('upfile')[i].files[0];
                         var path = document.getElementsByClassName('upfile')[i].value;


                         var img_titles =path.split("\\");
                         img_title = img_titles[2];
                         console.log(img_titles);

                         var reader = new FileReader();
                         reader.readAsDataURL(file);
                         reader.onload = function(e){
                             img.src = e.target.result;
                         };
                         var size = file.size;//多少K
                         var big = size/1024;
                         big = big.toString();
                         big = big.slice(0,big.indexOf("."));

                         var imgType = path.slice(path.lastIndexOf(".")+1,path.length).toLowerCase();
                         if(imgType !="png" && imgType !="jpg" && imgType !="gif"){
                             dom.popup({"txt":"图片限制png,jpg,gif格式","btn":5});
                             return;
                         }
                        img.onload = function(){
                         if(big>2048){
                             dom.popup({"txt":"图片不能大于2M","btn":5});
                         }else{
                             var url = tools.portUrl+"upload";
                             var formData = new FormData(thats.parent()[0]);
                             console.log(formData);
                             $.ajax({
                                 url: url,
                                 type: 'post',
                                 data: formData,
                                 cache: false,
                                 processData: false,
                                 contentType: false,
                                 success:function(data){
                                     $(".formExcel")[0].reset();
                                     paths = data.respparam.url;
                                     // console.log(paths);
                                     // var str = "<li><div><img src=" + paths + "></div><span class='hand del'>删除</span></li>"
                                     // thats.parents('li').find('.zpicture').append(str);
                                     // $(".del").on("click",function(){
                                     //     $(this).parent().remove();
                                     // })
                                     /*console.log(data);
                                     that.drawImg();*/
                                     that.drawImg(mask);
                                 },
                                 error:function(data){
                                 }
                             });
                         }
                     };
                     }else{
                         dom.popup({"txt":"图片最多上传5张","btn":5});
                     }
                 })
             });
         },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值