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接收即可。
展开阅读全文

没有更多推荐了,返回首页