针对之前的图片粘贴上传方法进行封装,并给出使用案例,如下:
目录
一.封装的文件
1.css文件:paste-img-util.css
/*图片粘贴功能的样式*/
.img-class {
width: 525px;
height: 290px;
cursor: pointer;
}
.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.js文件:paste-img-util.js
// 初始化配置
$(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);
// 拖拽事件
document.getElementById('pasteShapeIcon').addEventListener("drop", function (e) {
e.stopPropagation();
e.preventDefault();
handleFiles(e.dataTransfer.files);
}, false);
}
});
// 判断是否是ie浏览器
function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
// 非ie浏览器图片预览方法
function preViewImg(file){
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);
}
// 粘贴上传图片方法
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 {
// 预览图片
preViewImg(file);
// 提示是否上传
showTip(file);
}
} else {
//其他不兼容的浏览器
log.innerHTML = '<span style="color:red;">当前浏览器不支持上传</span>';
return;
}
} else {
//ie 浏览器要手动上传
log.innerHTML = '<span style="color:red;">请选择图片提交上传</span>';
return;
}
}
// 拖拽上传图片方法
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
//如果拖住进来的是图片文件则显示
if (file.type.match(/image*/)) {
$("#pasteShapeIcon").focus();
// 预览图片
preViewImg(file);
showTip(file);
} else {
st.layer.alert('请上传图片格式文件!', {icon : 3, time : default_close_time});
continue;
}
}
}
// 保存前确认提示
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;
}
});
}
// 保存图片
function sendFile(file) {
// 上传必传参数(记录主键ID)
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;
var obj;
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)) {
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;
}
});
}
}
}
// 插件显示图片
function getImg(cellvalue, alarmId) {
//清理原图片缓存
$('[data-show=add]').remove();
if(cellvalue == "" || cellvalue == null || cellvalue == "0"){
// 加载遮罩
st.layer.load(3);
$.ajax({
url : path + '/alarm/getAlarmImgs',
type : 'POST',
timeout : 300000,// 超时时间设置为300s
dataType : 'json',
data : {
'alarmId' : alarmId
},
complete : function() {
st.layer.closeAll('loading');
},
success : function(data, status) {
if (data.successful) {
var imgObjectList = data.resultValue.split("#split#");
if (null != imgObjectList && imgObjectList.length > 0) {
for (var i = 0, j = 1; i < imgObjectList.length; i++, j++) {
if (null != imgObjectList[i] && "" != imgObjectList[i] && imgObjectList[i] != "null") {
$("#alarmImg").append('<img data-show="add" data-caption="图' + j + '(共' + imgObjectList.length + '张)" data-src="' + imgObjectList[i] &#