jquery实现图片上传的一些坑

刚开始实习，要做一个车型测试FE界面。

其中一个部分就是有一个上传图片的button，点击之后可以通过选择拍照或者是从相册选择来上传图片。

上传图片的button

这个的实现方式就是h5的 type = file的input ，最简单的方式就是   <input type="file">     因为只能上传图片，所以加上accept属性。再加上class和name，id属性就是这样

<input type="file" class="upload-input-file" accept="image/*" id="file_upload" name="file" />  

但是这样实现之后，在PC端有点问题，就是点击Button后响应非常慢，百度了一下说要把accept的属性展开写，所以最后是这样的

<input type="file" class="upload-input-file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" id="file_upload" name="file" />

但是这样写的话，在安卓的微信端又会导致点击按钮的时候调用不出拍照只能从图库选择，所以需要判断下当前的设备是不是微信移动端，如果是的话需要把accept重新设置成image/*

我是这样写的

var u = navigator.userAgent;
    if(u.toLowerCase().match(/MicroMessenger/i)=='micromessenger'){
      // $('.upload-input-file').attr('capture','camera');
      $('.upload-input-file').attr('accept','image/*');
    }

网上还有一种方法就是加上capture = “camera”，但是我这样写的话ios端又只能实现拍照而不能从图库选择。。。QAQ建议大家拿多种手机多试试

然后就是这个button太丑了，，肯定不能满足需求的，所以宝宝美化了一下。思路就是再写一个普通的button，然后把这个input定位在button上面。实现代码是酱的

HTML代码

 <form id="upload_form" enctype="multipart/form-data" class="col-xs-10 col-xs-offset-1 col-md-10 col-md-offset-1 upload-fm">
        <button class="upload-btn btn btn-primary"">
           <span class="glyphicon glyphicon-upload"></span>
            上传图片</button>
         <input type="file" class="upload-input-file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" id="file_upload" name="file" />
  </form>

CSS代码：

input[type=file] {
      margin-top: 5px;
      opacity: 0;
      position: absolute;
      top:0;
      width: 100%;
  }

  .upload-fm{
    position: relative;
  }

  .upload-btn{
    display: block;
    width: 100%;
  }

最后呈现的样子是酱紫的，我用了bootstrap的样式。这样button这一部分就完毕惹。

上传部分

关于上传图片到服务器，我当时搜了下。主要就是两种方式，一种是把表格序列化，然后把表格放到formdata里面，还有种就是直接把文件append到formdata里面。

第一种方式我一直出错，就尝试了第二种方法，一下子就成功了。贴下我的代码吧

         var input = ev.target;
         var formdata =new FormData();
         //input.files[0]就是上传的图片，这里只上传一张图，所以是files[0]
         formdata.append('file',input.files[0]);
         console.log(formdata);
         $.ajax({
                url: "api/img/parse",
                type: "POST",  
                data: formdata,  
                cache: false,         //这边是false
                contentType: false,   //这边也要是false
                processData: false,    //这边也是也会false哦
                .......
              });

啊。。。。写完发现CSDN的上传button就没有美化。。。。哈哈哈哈哈哈哈哈哈哈哈哈早知道我也不美化啦