ajax实现图片上传和预览

图片上传功能

html结构：

       

       
 
       
   
            ![](6f4fbfb7/addimg.png)
            
       
  

在html中input的type=file就可以实现文件的上传功能，在其属性中也包含一个accept=‘’；可以限制文件的类型，但是在chrom浏览器中会产生很大的延时，页面给人的感觉非常卡顿，因此最好在js代码中对文件进行类型判断。input也可以设置属性multiple=“multiple”实现多个文件的上传。在上述的代码中，我将input[type=file]的透明度设置成了0 ，在用了相对定位relative和z-index的样式，使用一个图片来模仿添加图片上传的按钮。这次的项目中我们主要是h5页的上传图片，因此没有添加多个文件上传的功能，也没有使用ajaxfileupload的插件，就自己动手写了一个功能，主要用到formData类型的变量，将file对象存入其中，然后传到后台的接口，在从后台的接口获取返回的图片在图床的链接信息。主要的js代码如下：

---

js代码：

 //上传图片预览效果
function ImgPreview(srcImg){
  var preview=$('#preview_wrap');
     var result='
![]('+srcImg+')
';
     preview.append(result);  
}
 $('#preview_wrap').on('click','.del_Img',function(){
  $(this).parent('div').remove();
  });
$('#uploadIMG').on('change',function(){
     var len=$('.preview').length;
     var picsdata=$('#uploadIMG').val();
     if(len>2){
       jsAlert('最多可以上传3张照片！');
       close();
     }else{
      var _file=document.getElementById("uploadIMG");
      var i=_file.value.lastIndexOf('.');
      var len=_file.value.length;
      var extEndName=_file.value.substring(i+1,len);
      var extName="GIF,BMP,JPG,JPEG,PNG";//首先对格式进行验证
      if(extName.indexOf(extEndName.toUpperCase())==-1){
         jsAlert("请您上传图片");
         close();
        }else{
          console.log(extEndName);
          var picFormData = new FormData();
          var picdata=this.files[0];
          picFormData.append("pic", picdata);
          console.log(picFormData);
          $.ajax({
            type:'POST',
            data:picFormData,
            contentType:false,
            processData:false,
            cache:false,
            url:'http:///feedback/upimg',
            success:function(res){
                 if(res.data.errno==0){
                   var srcImg=res.data.errmsg;
                   ImgPreview(srcImg);}
             }   
      }); 
    }
  }    
});

首先对于图片上传来说，使用ajax只能通过post请求上传图片，不能通过get请求，因此对于ajax的跨域问题，就不能使用jsonp的方法来解决，因为jsonp只支持get请求。本人也是折腾半天才通过百度的方法找到了原因。理论的知识需要通过实践来验证才能理解的更加透彻。此外对于ajax发送formData类型的数据，需要设置几个必要的参数：

contentType:false,//内容类型设置为false，告诉后台为formData类型
processData:false,//因为是formData类型的参数所以不需要处理
cache:false,//图片不需要缓存

对于预览的实现很简单，就是追加一层div，修改其中的img的src属性，因为本地预览对于h5的页面手机端有bug，具体什么bug我也没有试验，同事说图片预览还是需要接口返回的链接地址比较靠谱。以上就是我的一个小功能的实现，也是花了不少天，在小慧姐的帮忙下才完成的，真的很感谢啊，出入职场的小白，希望早日能成为一名牛b的程序猿，有颜值也有实力哈哈哈！

文尾寄语

---

这是我第一使用markdown编辑文本，真的很棒哦，很赞。也是出入工作的第一篇技术日志，和自己的工作有关，希望以后的生活能顺顺利利，技术能更上一层楼，有喜欢前端的小伙伴们可以一起相互学习，本人还是渣渣，还需要大牛们多多来指导指导！

马上要毕业了，时间好快，不知道未来的路会是鲜花和掌声还是满地荆棘，无论如何我都会微笑面对，新的生活就此要拉开帷幕了！期待！激动！