web端文件上傳，預覽，下載，刪除
阿新 • • 發佈：2018-06-22
ffice formdata 創建 UC click UNC pointer chan children
//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);
})
},
web端文件上傳，預覽，下載，刪除