//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端文件上传,预览,下载,删除的更多相关文章

  1. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  2. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  3. 用file标签实现多图文件上传预览

    效果图: js 代码: <script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document ...

  4. python django web 端文件上传

    利用Django实现文件上传并且保存到指定路径下,其实并不困难,完全不需要用到django的forms,也不需要django的models,就可以实现,下面开始实现. 第一步:在模板文件中,创建一个f ...

  5. React + js-xlsx构建Excel文件上传预览功能

    首先要准备react开发环境以及js-xlsx插件 1. 此处省略安装react安装步骤 2.下载js-xlsx插件 yarn add xlsx 或者 npm install xlsx 在项目中引入 ...

  6. [js] - 前端FileReader使用,适用于文件上传预览.(并未传入后端)

    <body> <div class="box"> <div class="container"> <ul> &l ...

  7. PHP文件上传预览

    主页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  8. h5图片上传预览

    项目中常用到文件上传预览功能,整理一下:如果不想使用 type="file" 的默认样式,可以让其覆盖在一个按钮样式上边,设其透明度为0,或者使用Label关联 html < ...

  9. FileReader()读取文件、图片上传预览

    前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...

随机推荐

  1. 互斥锁lock、信号量semaphore、事件Event、

    1.互斥锁lock 应用在多进程中互斥所lock:互斥锁是进程间的get_ticket互相排斥进程之间,谁先枪占到资源,谁就先上锁,等到解锁之后,下一个进程在继续使用.# 语法: 上锁: lock.a ...

  2. 【C# in depth 第三版】温故而知新(1) (转)

    声明 本文欢迎转载,原文地址:http://www.cnblogs.com/DjlNet/p/7192354.html 前言 关于这本书(<深入理解C# 第三版>)的详细情况以及好坏,自行 ...

  3. JRebel for IntelliJ

    好久没用jrebel了,跟前端进行项目联调总是有些许改动,还是热部署方便. 目前用的idea版本:IntelliJ IDEA 2019.2 JRebel插件版本:JRebel for IntelliJ ...

  4. DP,数论————洛谷P4317 花神的数论题(求1~n二进制中1的个数和)

    玄学代码(是洛谷题解里的一位dalao小粉兔写的) //数位DP(二进制)计算出f[i]为恰好有i个的方案数. //答案为∏(i^f[i]),快速幂解决. #include<bits/stdc+ ...

  5. VMware 虚拟机安装Mac OS X 10.10

    有图有真相,哈哈 一.下载以上文件 1. vm百度软件下载即可,版本都能满足需要,随意好了 2. unlocker 207 3. Mac OS X 10.10镜像 二.基本步骤 1. 虚拟机的安装 下 ...

  6. 【OpenCV入门教程之一】 OpenCV 2.4.8 +VS2010的开发环境配置

    目录(?)[-] 因为读研期间的研究方向是图像处理所以浅墨这段时间闭门研究了很多OpenCV和图像处理相关的知识与内容眼看自己积累到一定的程度了于是决定开始开设这个OpenCV系列专栏总结自己所学也分 ...

  7. Node流操作(启动器forever)

    详情: https://www.cnblogs.com/lalalagq/p/9749680.html 流:读取流,写入流,双向读写流. 读写流——压缩.加密 数据库不能直接接受流 sf.readFi ...

  8. [转帖]快速部署Telegraf & Influxdb

    快速部署Telegraf & Influxdb https://www.cnblogs.com/deykenlee/p/7565647.html 作者的blog 比较早 后来 influxdb ...

  9. sql server凭据

    转自:https://blog.csdn.net/kk185800961/article/details/52469170 凭据是包含连接到 SQL Server 外部资源所需的身份验证信息(凭据)的 ...

  10. web应用安全

    一.三种坏人与servlet安全 网络攻击者 对应的servlet安全规范 假冒者 认证 非法升级者 授权 窃听者 机密性   数据完整性 认证可以防止“假冒者”攻击,授权可以防止“非法升级者”攻击, ...