图片上传（1）

html部分

<form id= "uploadForm">
<input type ="file" name="file" class="fileContent hiddenClass" onchange="doUpload()" hidden/>
<input type ="text" name="areaCode" class="hiddenClass" value="globalservice" hidden/>
<input type ="text" name="sessionId" class="hiddenClass" value="22522BCF22D9A978AA6577342134F2A4" hidden/>
</form>
<button class="btn zbtn-bg btn-sm" onclick="triggerUpLoad()">上传附件</button>
<div class="picFile">
<ul id="picContent">
</ul>
</div>

 

css部分

.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;
}

js 部分

function doUpload() {
  var commonUrl='http://192.168.12.200:8181';
  var fileName=$(".fileContent")[0].files[0];
  if(!fileName){
    return false;
  }
  var formData = new FormData($( "#uploadForm" )[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;
        console.log(data);
        var imgUrl=commonUrl+'/file/'+file.url;
        console.log(imgUrl);
        var imgShow='<li style="500px;float: left;border: 1px solid #CCCCCC;position: relative"><div style="height: 90px;padding: 4px;overflow: hidden" class="imgContent"><a href="'+imgUrl+'" target="_blank"><img src="'+imgUrl+'"  style="80px;height: 80px"/></a><span class="fileNameClass">'+file.fileName+'</span><span onclick="removeImg(this)" class="removeImg">&times;</span></div></li>';
        $('#picContent').append(imgShow);
      }
    },
    error: function (data) {

    }
  });
}
function removeImg(obj) {
  $(obj).parent('div').parent('li').remove();
}
function triggerUpLoad() {
  $('.fileContent').trigger('click');
}