html+css
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js"></script>
<script src="js/tableEdit.js"></script>
</head>
<style>
.picContent li{
list-style: none;
margin: 2px;
500px;float:
left;border: 1px solid #78BC27;
position: relative
}
span.fileNameClass{
position: relative;
top:-50px;
left:86px;
380px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-o-text-overflow: ellipsis;
display:block;
}
span.removeImg{
position: absolute;
top:0px;
right:6px;
cursor: pointer;
}
.enlargePic{
position: fixed;z-index: 9999;display: none;
}
</style>
<body>
<form class="uploadForm">
<input type ="file" name="file" class="fileContent hiddenClass" onchange="doUpload(this)"/>
<input type ="text" name="areaCode" class="hiddenClass" value="globalservice" />
<input type ="text" name="sessionId" class="hiddenClass" value="2E21B96D1CA2BFA4348CD0B420B969A3"/>
</form>
<button class="btn zbtn-bg btn-sm" onclick="triggerUpLoad(this)">上传附件</button>
<div class="picC">
<ul class="picContent">
</ul>
</div>
</body>
</html>
js部分
function doUpload(thisObj) {
var commonUrl='http://192.168.12.200:8181';
var fileName=$(thisObj)[0].files[0];
if(!fileName){
return false;
}
var thisP=$(thisObj).parent('form.uploadForm');
var formData = new FormData(thisP[0]);
$.ajax({
url: commonUrl+'/file/upload' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
if(data.payload.results.file.fileName){
var file=data.payload.results.file;
var imgUrl=commonUrl+'/file/'+file.url;
var imgShow='<li><div class="enlargePic" onclick="closePic(this)"><img src="'+imgUrl+'" style="400px;height: 400px;border: 1px solid #78BC27" onclick="enlarge(this)"/></div><div style="height: 90px;padding: 4px;overflow: hidden" class="imgContent"><img src="'+imgUrl+'" style="80px;height: 80px" onclick="enlarge(this)"/><a href="'+imgUrl+'" target="_blank" style="color:#78BC27"><span class="fileNameClass">'+file.fileName+'</span></a><span onclick="removeImg(this)" class="removeImg">×</span></div></li>';
thisP.siblings('.picC').children('.picContent').append(imgShow);
}
},
error: function (data) {
console.log('server error！');
}
});
}
function removeImg(obj) {
$(obj).parent('div').parent('li').remove();
}
function enlarge(obj) {
var Left = (document.documentElement.clientWidth-400)/2;
var top = (document.documentElement.clientHeight-400)/2;
$(obj).parent('div').siblings('div').show().css('left',Left+'px').css('top',top+'px');
}
function closePic(obj) {
$(obj).hide();
}
function triggerUpLoad(obj) {
$(obj).siblings('form.uploadForm').children('.fileContent').trigger('click');
}