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();