圖片貼上上傳,預覽——相容ie（手動上傳）和谷歌瀏覽器（貼上或拖拽上傳）
阿新 • • 發佈：2018-12-14
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 responseUtil = new ResponseUtil();
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;
}