多文件上传 预览 删除

1、在页面上写一个

设置此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 = ‘’;
$(’#plus’).before(’

• ’+imgHtml+’
• ’);
  }
  };
  其中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接收即可