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

})

},