图片粘贴上传,预览——兼容ie（手动上传）和谷歌浏览器（粘贴或拖拽上传）

1.优化上传的css：

.img-class {
    width: 525px;
    height: 290px;
}

.img-paste-class {
    width: 530px;
    height: 330px;
}

.a-file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}

.a-file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}

.a-file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

2.页面jsp部分：ie上传采用的是form表单提交；其他支持粘贴上传的采用XMLHttpRequest的formData()提交;

<form id="applyFrom" name="applyFrom" class="form-inline" method="post" enctype="multipart/form-data"
      style="margin: 15px 0 0 10px; padding-right: inherit;">
    <input type="hidden" value="${berthChargeRecord.recordId}" id="recordId"/>
    <input type="hidden" value="${berthChargeRecord.alarmId}" id="alarmId" name="alarmId"/>
...
<div class="control-group">
    <div class="control-label">入车图片：</div>
    <div class="controls" style="position: relative;">
        <p id="log" style="width: 490px;word-break:break-all;"></p>
        <div id="inputImg" style="display: none;">
            <a href="javascript:void(0);" class="a-file">选择图片
                <input type="file" id="file" name="file"
                       onchange='getImgName(this);'/>
            </a>
        </div>
        <div id="pasteShapeIcon" contenteditable="true" class="img-paste-class" title="粘贴上传图片">
            <span id="pasteShapeIconTitle"></span>
            <img id="photoPath" src="${berthChargeRecord.realUrl}"
                 class="img-class">
        </div>
    </div>
</div>
</form>

3.js部分:

//判断是否是ie
function isIE() {
    if (!!window.ActiveXObject || "ActiveXObject" in window)
        return true;
    else
        return false;
}

$(function () {
    //照片不存在显示加载按钮
    if ($("#photoPath").attr("src") == "") {
        if (isIE()) {
            $("#inputImg").show();
            $("#pasteShapeIcon").hide();
        } else {
            $("#inputImg").hide();
            document.getElementById("pasteShapeIcon").style.border = "dashed";
            $("#pasteShapeIconTitle").text("在此框中粘贴图片");
        }
        $("#photoPath").hide();
    } else {
        if (isIE()) {
            $("#inputImg").show();
        }
        document.getElementById("pasteShapeIcon").style.border = "0";
        $("#pasteShapeIconTitle").text("");
        document.getElementById("photoPath").style.border = "solid";
        $("#photoPath").show();
    }
});

//------------------------以下为非ie粘贴或拖拽上传---------------------------------//  

// 粘贴事件绑定(支持粘贴事件的浏览器使用) 
if (!isIE()) {
    document.getElementById('pasteShapeIcon').addEventListener("paste", function (event) {
        paste_img(event);
    }, false);
}

// 粘贴图片保存
function paste_img(event) {
    if (event.clipboardData || event.originalEvent) {
        //not for ie11  某些chrome版本使用的是event.originalEvent
        var clipboardData = (event.clipboardData || window.clipboardData || event.originalEvent.clipboardData);
        if (clipboardData.items) {
            var items = clipboardData.items,
                file = null;
            //阻止默认行为即不让剪贴板内容在div中显示出来
            event.preventDefault();
            if (items && items.length) {
                // 搜索剪切板items
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        //getAsFile() 此方法只是living standard firefox ie11 并不支持
                        file = items[i].getAsFile();
                        break;
                    }
                }
            } else {
                log.innerHTML = '<span style="color:red;">当前浏览器不支持桌面图片复制和粘贴上传</span>';
                return;
            }
            if (!file) {
                log.innerHTML = '<span style="color:red;">粘贴内容非图片</span>';
                return;
            } else {
                // 预览图片
                var reader = new FileReader()
                reader.onload = function (event) {
                    document.getElementById("pasteShapeIcon").style.border = "0";
                    $("#pasteShapeIconTitle").text("");
                    document.getElementById("photoPath").style.border = "solid";
                    $("#photoPath").show();
                    $("#photoPath").attr("src", event.target.result);

                }
                reader.readAsDataURL(file);
                // 提示是否上传
                showTip(file);
            }
        } else {
            //其他不兼容的浏览器
            log.innerHTML = '<span style="color:red;">当前浏览器不支持上传</span>';
            return;
        }
    } else {
        //ie 浏览器要手动上传
        log.innerHTML = '<span style="color:red;">请选择图片提交上传</span>';
        return;
    }
}

//显示提示
function showTip(file) {
    //提示是否替换图片
    st.layer.confirm('确定上传保存该图片?', {
        time: 0,
        closeBtn: 2,
        btn: ['确定', '取消'],
        yes: function (index, layero) {
            //保存图片
            sendFile(file);
            st.layer.close(index);
        },
        cancel: function (index) {
            st.layer.alert('您已取消上传,图片不会被保存!', {icon : 4, time : default_close_time});
            return;
        }
    });

}

//非ie拖拽上传事件
if (!isIE()) {
    document.getElementById('pasteShapeIcon').addEventListener("drop", function (e) {
        e.stopPropagation();
        e.preventDefault();
        handleFiles(e.dataTransfer.files);
    }, false);
}
//拖拽文件处理事件
handleFiles = function (files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];

        //如果拖住进来的是图片文件则显示
        if (file.type.match(/image*/)) {
            $("#pasteShapeIcon").focus();
            // 直接上传，当然你也可以不在这上传，可以点击按钮在上传
            showTip(file);
        } else {
            continue;
        }
    }
};

//保存图片
function sendFile(file) {

    // 这里是上传
    var alarmId = $("#alarmId").val();
    var xhr = new XMLHttpRequest();

    // 上传进度
    if (xhr.upload) {
        xhr.upload.addEventListener('progress', function (event) {
            log.innerHTML = '<span style="color:blue;">正在上传，进度：</span><span style="color:red;">' + Math.round(100 * event.loaded / event.total) / 100 + '%</span>';
        }, false);
    }
    // 上传结束
    xhr.onload = function () {
        var res = xhr.responseText;
        if (res) { //返回值可能为空，就会报错
            obj = eval('(' + res + ')');
        }
        if (obj.successful) {
            log.innerHTML = '<span style="color:blue;">上传成功，地址是：' + obj.successInfo + '</span>';
        } else {
            log.innerHTML = '<span style="color:red;">' + obj.errorInfo + '</span>';
        }

    };
    xhr.onerror = function () {
        log.innerHTML = '<span style="color:red;">网络异常，上传失败</span>';
    };
    xhr.open('POST', path + '/berthChargeRecord/uploadShapeIcon', true);
    xhr.setRequestHeader('FILENAME', encodeURIComponent(file.name));

    var fd = new FormData();
    fd.append("file", file);
    fd.append("alarmId", alarmId);
    xhr.send(fd);


}

//------------------------以下为ie手动上传---------------------------------//

//附件按钮优化 ，加入图片判断
function getImgName(file) {
    var filePath = $(file).val();
    var parent = $(file).parent();
    var arr = filePath.split('\\');
    var fileName = arr[arr.length - 1];
    if (filePath == "") {
        log.innerHTML = '<span style="color:red;">请选择图片</span>';
        return false;
    } else {
        if (!/\.(gif|jpg|jpeg|png|bmp|pic|GIF|JPG|JPEG|PNG|BMP|PIC)$/.test(fileName)) {
            //$(".a-file").html("选择图片");
            parent.text("选择图片").prepend($(file));
            log.innerHTML = '<span style="color:red;">仅限于png、gif、jpeg、jpg、bmp、pic图片格式文件上传</span>';
            return false;
        } else {
            log.innerHTML = '';
            if (fileName.length > 16) {
                var name1 = fileName.substring(0, 8) + "...";
                var name2 = "..." + fileName.substring(fileName.length - 8, fileName.length);
                fileName = name1 + name2;
            }
            parent.text(fileName).prepend($(file));

            //图片预览
            var $file = $(file);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#photoPath");
            var $paste = $("#pasteShapeIcon");
            // 区别是否支持
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("photoPath");
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
            $paste.removeAttr('title');
            $paste.show();
            $img.show();
            $img.attr('border', 'solid');
            $img.attr('src', dataURL);

            //提示是否替换图片
            st.layer.confirm('确定上传保存该图片?', {
                time: 0,
                closeBtn: 2,
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    st.layer.close(index);

                    //给form添加action地址并执行提交
                    var options = {
                        url: path + "/berthChargeRecord/uploadShapeIcon",
                        type: 'post',
                        //target:'formUpFile',　　//服务器返回的响应数据显示在元素(Id)号确定
                        //clearForm:true,　　　　　　 //提交成功后是否清空表单中的字段值
                        //restForm:true,　　　　　　  //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态
                        //timeout:6000, 　　　　　 　 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。
                        dataType: 'json',
                        success: function (obj) {
                            if (obj) {
                                if (obj.successful) {
                                    $("#photoPath").attr("src", obj.successInfo);
                                    log.innerHTML = '<span style="color:blue;">上传成功，地址是：' + obj.successInfo + '</span>';
                                } else {
                                    log.innerHTML = '<span style="color:red;">' + obj.errorInfo + '</span>';
                                }
                            } else {
                                log.innerHTML = '<span style="color:red;">图片已保存</span>';
                            }
                        },
                        error: function (xhr, status, error) {
                            var data = xhr.responseText;
                            if (data != null && data != '') {
                                data = park.util.parseJSON(data);
                                if (null != data && null != data.errorInfo) {
                                    log.innerHTML = '<span style="color:red;">' + data.errorInfo + '</span>';
                                } else {
                                    log.innerHTML = '<span style="color:red;">请求失败,请重试</span>';
                                }
                            } else {
                                log.innerHTML = '<span style="color:red;">请求失败,请重试</span>';
                            }
                        },
                        complete: function (xhr, status) {
                            st.layer.closeAll('loading');
                        }
                    };
                    $("#applyFrom").ajaxSubmit(options);

                },
                cancel: function (index) {
                    st.layer.alert('您已取消上传,图片不会被保存!', {icon : 4, time : default_close_time});
                    return;
                }
            });
        }

    }


}

4.后台保存部分controller:

/**
 * @Description: 图片粘贴保存数据库
 * @param file
 *            图片的实体
 * @param alarmId
 *            与图片相关的报警记录id
 * @return
 *
 */
@RequestMapping(value = "/uploadShapeIcon", method = RequestMethod.POST)
public void uploadShapeIcon(MultipartFile file, Long alarmId,
      HttpServletResponse response) throws Exception {

   String url = "";
   WrappedResult wrappedResult = null;
   if (null == file || null == alarmId) {
      wrappedResult=WrappedResult.failedWrappedResult("图片上传参数为空");
   }
   if (FileUtil.isNotImageFile(file)) {
      wrappedResult=WrappedResult.failedWrappedResult("图片格式不支持,请上传JPG/JPEG/GIF/PNG/BMP类型的图片");
   }
   // 保存上传图片并返回真实访问路径
   url = berthChargeRecordService.saveUploadPic(file, alarmId);
   // 获取真实路径
   url = ImageServerUtil.getRealShowUrl(url, UserInfoUtil.getUserInfo());
   if (StringUtils.isNotEmpty(url)) {
      wrappedResult=WrappedResult.successWrapedResult(url);
   }
   
   ResponseUtil.outHtmlString(wrappedResult, response);
}

public static void outHtmlString(Object obj, HttpServletResponse response) {
   response.setContentType("text/html;charset=utf-8");
   outString(JSON.toJSONString(obj), response);
}

/*
 * 输出String返回到页面
 */
public static void outString(String str, HttpServletResponse response) {
   try {
      PrintWriter out = response.getWriter();
      response.setHeader("Pragma", "No-cache");
      response.setDateHeader("Expires", 0);
      response.setHeader("Cache-Control", "no-cache");
      out.write(str);
   } catch (IOException e) {
   }
}

5.后台部分ServiceImpl:

/**
 * @Description: 保存上传的图片
 * @date 2018年09月25日 19:31:56
 * @param file
 * @param alarmId
 * @return
 *
 */
@Override
public String saveUploadPic(MultipartFile file, Long alarmId)
      throws Exception {

   String fileUrl = null;
   // 保存文件
   if (null != file && file.getSize() > 0) {
      fileUrl = ImageServerUtil.upload(file.getBytes());

      if (StringUtils.isNotEmpty(fileUrl)) {
         // 更新报警表记录的图片路径
         AlarmRecord record = new AlarmRecord();
         record.setRecordId(alarmId);
         record.setImgUrl(fileUrl);
         alarmRecordDao.updateByPrimaryKeySelective(record);
      }
   }
   return fileUrl;
}

实现效果图:

1.谷歌等支持粘贴的浏览器页面展示如下:

谷歌等支持粘贴事件的浏览器上传成功页面:

2.ie浏览器上传页面展示:

ie浏览器上传效果与上面一致;