圖片粘貼上傳,預覽——兼容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"
                       οnchange='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瀏覽器上傳效果與上面一致;