web端文件上传，预览，下载，删除
//HTML部分
<div class="item attachment attachmentNew">
<span class="name">附件</span>
<span class="triggerUpLoad btnSpan" onclick="triggerUpLoadList(this)" v-show="operationType<2"><a>上传报销凭证</a></span>
<form class="uploadForm" style="padding-left: 150px">
<input type ="file" name="file" class="fileContent hiddenClass" onchange="doUploadList(this)"/>
<input type ="text" name="sessionId" class="hiddenClass"/>
</form>
<div class="picC">
<ul class="fileContent" id="fileBack2">
<li>
<div class="fileName">文件名</div>
<div class="fileSize">文件大小</div>
<div class="UploadingPerson">上传人</div>
<div class="fileTime">上传时间</div>
<div class="fileRemove" v-show="operationType<2">操作</div>
</li>
</ul>
</div>
</div>
//上传部分
//列表展示的上传方式
function doUploadList(thisObj) {
var uploadFormAll=$(thisObj).parent(\'.uploadForm\');
var areaCode=$.getCookie(\'areaCode\');
var sessionId=$.getCookie(\'sessionId\');
uploadFormAll.children(\'input:eq(1)\').val(sessionId);
uploadFormAll.children(\'input:eq(2)\').val(areaCode);
var commonUrl = $.getCookie(\'prefixUrl\');
var fileName=$(thisObj)[0].files[0];
if(!fileName){
return false;
}
var thisP=$(thisObj).parent(\'form.uploadForm\');
console.log(thisP[0]);
var formData = new FormData(thisP[0]);
//console.log(file[0].size);
//console.log(file[0].size/1024 + \'kb\');
$.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 fileName=file.fileName;
var fileLastName = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length);
var oDate = new Date(file.createTime);
createTime=oDate.getFullYear() + \'-\' + (oDate.getMonth() + 1 > 9 ? oDate.getMonth() + 1 : \'0\' + (oDate.getMonth() + 1)) + \'-\' + (oDate.getDate() > 9 ? oDate.getDate() : \'0\' + oDate.getDate());
//var imgUrlScan=\'http://view.officeapps.live.com/op/view.aspx?src=\'+imgUrl;
var imgShow=\'<li picIds="\'+file.id+\'">\'
+\'<div class="fileName"><a href="\'+imgUrl+\'" target="_blank" style="color:#78BC27" title="\'+fileName+\'">\'+fileName+\'</a></div>\'
+\'<div class="fileSize" style="margin-left:4px">\'+file.fileSize+\'</div>\'
+\'<div class="UploadingPerson" style="margin-left:4px">\'+file.userName+\'</div>\'
+\'<div class="fileTime" style="margin-left:4px">\'+createTime+\'</div>\'
+\'<div class="fileRemove" style="margin-left:4px;color:#78BC27;cursor:pointer" onclick="removeImgList(this,\\'\'+file.id+\'\\')"><span class="fa fa-trash-o"></span></div>\'
+\'</li>\';
thisP.siblings(\'.picC\').children(\'.fileContent\').append(imgShow);
}
},
error: function (data) {
console.log(\'server error！\');
}
});
}
function removeImgList(obj,thisId) {
$(obj).parent(\'li\').remove();
var params = {
id: thisId
};
var url = \'/file/delete\';
$.ajaxSend(url, params).done(function (data) {
if (data.code === \'00000000\') {
}
})
}
function enlargeList(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 enlargeNoticeList(obj) {
var thisTOP=document.getElementsByClassName(\'router\');
var Left = (document.documentElement.clientWidth-400-220)/2;
var top = (document.documentElement.clientHeight-400)/2+thisTOP[0].scrollTop;
$(obj).parent(\'div\').siblings(\'div\').show().css(\'left\',Left+\'px\').css(\'top\',top+\'px\');
}
function closePicList(obj) {
$(obj).hide();
}
function triggerUpLoadList(obj) {
$(obj).siblings(\'form.uploadForm\').children(\'.fileContent\').trigger(\'click\');
}
//回填部分
fileBackFill(arrData,strDom,type){
//后台数据arrData，strDom点击上传附件的dom对象，type数据操作类型（创建，编辑，审批，查看）
var commonUrl = $.getCookie(\'prefixUrl\');
var thisP=$(`#${strDom}`);
arrData.forEach(file=>{
var fileName=file.fileName;
var imgUrl=commonUrl+\'/file/\'+file.url;
var fileLastName = file.suffixName.substr(1);
//console.log(file[0].size/1024 + \'kb\');
var oDate = new Date(file.createTime);
var createTime=oDate.getFullYear() + \'-\' + (oDate.getMonth() + 1 > 9 ? oDate.getMonth() + 1 : \'0\' + (oDate.getMonth() + 1)) + \'-\' + (oDate.getDate() > 9 ? oDate.getDate() : \'0\' + oDate.getDate());
if(type===\'2\'||type===\'3\'){
var fileItem=\'<li picIds="\'+file.id+\'">\'
+\'<div class="fileName"><a href="\'+imgUrl+\'" target="_blank" style="color:#78BC27" title="\'+fileName+\'">\'+fileName+\'</a></div>\'
+\'<div class="fileSize" style="margin-left:4px">\'+file.fileSize+\'</div>\'
+\'<div class="UploadingPerson" style="margin-left:4px">\'+file.userName+\'</div>\'
+\'<div class="fileTime" style="margin-left:4px">\'+createTime+\'</div>\'
+\'</li>\';
}else{
var fileItem=\'<li picIds="\'+file.id+\'">\'
+\'<div class="fileName"><a href="\'+imgUrl+\'" target="_blank" style="color:#78BC27" title="\'+fileName+\'">\'+fileName+\'</a></div>\'
+\'<div class="fileSize" style="margin-left:4px">\'+file.fileSize+\'</div>\'
+\'<div class="UploadingPerson" style="margin-left:4px">\'+file.userName+\'</div>\'
+\'<div class="fileTime" style="margin-left:4px">\'+createTime+\'</div>\'
+\'<div class="fileRemove" style="margin-left:4px;color:#78BC27;cursor:pointer" onclick="removeImgList(this,\\'\'+file.id+\'\\')"><span class="fa fa-trash-o"></span></div>\'
+\'</li>\';
}
thisP.append(fileItem);
})
},