type=file多图片上传 预览和删除

一、背景

    项目中要实现一个这样的功能，在移动端上传照片或拍照直接上传，照片能够回显到页面上；点击照片右上角的删除，可以删除此照片。

二、实现

    点击页面上图片，自动打开系统拍照和相册。实现方法如下：

        var fileArr = []; //存放图片内容的数组，提交数据到后台时用

        $('#uploadFile').unbind().on('click',function () {  //uploadFile是上面图片的Id
        var newFileInput = "<input id='uploadInput' type='file' class='file' accept='image/*' multiple />";
        $('body').append($(newFileInput));
        $("#uploadInput").unbind().on('change',function(){ //注：js里生成的dom事件需要用on
            $(this).removeAttr("id");
            var length = this.files.length;
            for(var i=0;i<length;i++){
                fileArr.push(this.files[i]);
                var objUrl = getObjectURL(this.files[i]);//调用函数调取图片地址
                if (objUrl) {
                    var imgHtml = '<img src="' + objUrl + '">';
                    $('#plus').before('<li class="policyImg">'+imgHtml+'</li>');
                }                
            }
        });
       $("#uploadInput").click(); //伪触发type=file的click事件
    });

在pc端chrome手机模拟器下，测试一切正常；但是在移动端，点击图片，无反应，偶尔过了很久，系统的拍照上传和相册上传才出来，这明显不行啊，去网上各种看，原来type=file是只读的，只能手动触发，伪触发存在兼容性问题。思来想去，决定用下面的方案实现：

    1、在页面上写一个

   <input id="uploadInput" type="file" class="file" οnchange="addFiles(this);" accept="image/*" multiple />

           设置此input的css样式，将其定位到上面图片的位置，设置opacity:0，这样点击图片的时候，实际点击的是input

 function addFiles(_this) {

    var fileList = _this.files;  
    var length = fileList.length;
    for(var i=0;i<length;i++){
        fileArr.push(fileList[i]); //将图片放入数组中
        var objUrl = getObjectURL(fileList[i]);//调用函数调取图片地址
        if (objUrl) {
            var imgHtml = '<img src="' + objUrl + '">';
            $('#plus').before('<li class="policyImg">'+imgHtml+'</li>');         
        }
};

        其中getObjectURL方法如下：

function getObjectURL(file) {

    var url = null;

    if (window.createObjectURL != undefined) {//basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) {//mozilla(firefox)兼容火狐
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {//webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}

        这样图片就能预览了，下面是删除的代码：

fileArr.splice(index,1);  //index是当前要删除图片的下标，下同

$('#imgList li').eq(index).remove(); //从dom中移除改图片

    最后是提交数据到后台：

    
var formData = new FormData();
$.each(fileArr,function(i,file){
  formData.append('files',file);
});  //将file放入formdata中
  $.ajax({
      url : "...",
      type : 'POST',
      dataType: 'json',
      data : formData,
      crossDomain: true,
      cache: false,
      processData: false,
      contentType: false,
      success : function(responseStr) {
          alert("成功");       
      },
      error : function(responseStr) {
          alert("失败");
      }
  });

后台利用 MultipartFile[] files接收即可。