博客

图片上传采用的是 input框的 type=file 的方式进行图片的上传。下面三种样式都是 input方式进行图片上传的。







我们点击上传图片的时候，图片上传到后台。首先给大家一个单张图片上传的示例

html:

 <div class="z_file1">

  <input type="file" name="file" id="file_more1" value="" accept="image/jpeg,image/png,image/jpg,image/gif" multiple="" onchange="previewImg(this);">

</div> 

function previewImg(input,imgObj) {
    var maxsize = 300 * 1024;//超过300k进行压缩
    //是否支持
    if (typeof FileReader === 'undefined') {
        alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
        input.setAttribute('disabled','disabled');
    }
    if(input.files && input.files[0]){
        var file = input.files[0],
            reader = new FileReader();
        if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
            alert('不是有效的图片文件!');
            return;
        }
        reader.readAsDataURL(file);
        reader.onload = function(e){
             var result=this.result;//获取到base64的图片
            //大于300k图片进行压缩
            if(result.length >= maxsize){
                getId(imgObj).setAttribute('src',result);//回显图片
                getId(imgObj).classList.add('on');//回显图片
                //var img = new Image();
                //img.src = result; //result是 传送过来的图片文件
                lrz(input.files[0], {  
                    width: 200  
                  })  
               .then(function (rst) {   
                       //压缩后异步上传  
                      $.ajax({  
                          url : url  
                          type: "POST",  
                          data : {
                            image:rst.base64,//压缩后的base值
                          },  
                          dataType:"json",  
                          cache:false,  
                          async:false,  
                          success : function(data) {
                            alert("成功");
                          },
                          error : function(){

                          }  
                          });  

                      })
            }else{
                getId(imgObj).setAttribute('src',result);
                getId(imgObj).classList.add('on');
                var img = new Image();
                img.src = result;
                getId(imgObj).setAttribute('src',result);
                getId(imgObj).classList.add('on');
                $.ajax({  
                    url :url,  
                    type: "POST",  
                    data : {
                        image:result//压缩后的base值
                    },  
                    dataType:"json",  
                    cache:false,  
                    async:false,  
                    success : function(data) {
                        alert("成功");
                    },
                    error : function(){

                    }  
                    });

           }

       }
    }
}

图片上传 利用onchange事件就行图片上传，创建FileReader对象 读取文件第一个文件的时候 new FileReader().readAsDataURL(event.target.files[0])；.读取完成会触发onload事件 在onload事件里边继续调用 new

图片上传 采用如果图片过大，就进行压缩上传。图片压缩采用了 使用的图片压缩是lrz方式，网上的一个插件，经过尝试挺好用的。

图片压缩需要引入的js：

    <!-- 压缩图片插件 -->
       <script src="/hljview/page/html/js/lrz.bundle.js"></script>
      <script src="/hljview/page/html/js/lrz.all.bundle.js"></script>

多张图片上传

html：

<div class="upload_pic_box">
             <div class="upload_pic">
              <div class="photo_box z_photo z_photo1" id="photo_box1">

                      <div class="z_file1">
                          <input type="file" name="file" id="file_more1" value="" accept="image/jpeg,image/png,image/jpg,image/gif" multiple="" onchange="imgChange1(this);">
                      </div>  

               </div>
                 <p>上传图片第一张将设置为封面照</p>
            </div>
       </div>

 /* 多张图片上传*/
  function imgChange(obj) {
        //获取点击的文本框
        var file = document.getElementById("file_more1");
            //存放图片的父级元素
        var imgContainer =document.getElementsByClassName('z_photo1')[0];
            //获取的图片文件
            var fileList = file.files;
            //文本框的父级元素
            var input = document.getElementsByClassName('z_file1')[0];
            var imgArr = [];
            //图片个数
            var pic_num=fileList.length;
            if(pic_num>6){
                mask.style.display = "block"
                text_.innerHTML="您好,图片不能超过六张";
                $("body").addClass('common_screen');

            }else{
            //遍历获取到得图片文件
              //var nname="";
              for (var i = 0; i <pic_num; i++) {
                var imgUrl = window.URL.createObjectURL(file.files[i]);
                var imgUrl = window.URL.createObjectURL(file.files[i]);    
                var file_ = file.files[i];
                var size=file.files[i].size/1024;
              if(size>20240){
                alert('请您选择小于20M的图片');
                return false;
               }
               //判断类型是不是图片  
              if(!/image\/\w+/.test(file_.type)){     
                      alert("请确保文件为图像类型");   
                      return false;   
              }  
              var reader = new FileReader();   
              reader.readAsDataURL(file_); 
              var imageName = "";
              reader.onload = function(e){  
                     imgDate = this.result; //就是base64 
                     lrz(input.files[0], {  
                         width: 200  
                       })  
                    .then(function (rst){

                    })

              } 
                imgArr.push(imgUrl);
                var imgAdd = document.createElement("div");
                imgAdd.setAttribute("class", "photo");
                imgAdd.setAttribute("imgurls", "'"+imgArr[i]+"'"); //imgurls 设置属性
                //添加 div
                imgAdd.style.backgroundImage="url("+imgArr[i]+")";
                imgContainer.insertBefore(imgAdd,input); 
            };

            }

            imgRemove();
            imgnum();

            var sures = document.getElementsByClassName("sure")[0];
            cancel.onclick=function(){
               mask.style.display = "none";
                 $("body").addClass('common_screen');
            }
            sure.onclick=function(){
               mask.style.display = "none";
                 $("body").removeClass('common_screen');
            }

          var browser = {
             versions: function () {
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
            //移动终端浏览器版本信息
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
            };
        } (),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }


      //如果是android
      if (browser.versions.android) {
          imgnum();
       }
  };
//限制上传张数
    var z_file = document.getElementsByClassName("z_file")[0];
          function imgnum(){
            var imgList1 = $('#photo_box .photo');    
            imgList1.each(function(){
            var index=$(this).index();
            if(index==5){
               z_file.style.display="none";
                return;
            }
            if(index>5){
               $(this).remove();
            }
            if(index<5){
              z_file.style.display="block";
            }

          })
        }

图片多张上传特点：先将所有图片进行加载，最后才逐个进行加载，图片都加载完成后才执行 reader.onload 事件。