//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. python之scrapy爬取jd和qq招聘信息

    1.settings.py文件 # -*- coding: utf-8 -*- # Scrapy settings for jd project # # For simplicity, this fi ...

  2. 006-数据结构-树形结构-二叉树、二叉查找树、平衡二叉查找树-AVL树

    一.概述 树其实就是不包含回路的连通无向图.树其实是范畴更广的图的特例. 树是一种数据结构,它是由n(n>=1)个有限节点组成一个具有层次关系的集合. 1.1.树的特性: 每个结点有零个或多个子 ...

  3. 【破解APP抓包限制】Xposed+JustTrustMe关闭SSL证书验证!

    转载:https://www.jianshu.com/p/310d930dd62f 1 前言 这篇文章主要想解决的问题是,在对安卓手机APP抓包时,出现的HTTPS报文通过MITM代理后证书不被信任的 ...

  4. 状态管理之 Flux、Redux、Vuex、MobX(概念篇)

    本文是对 Flux.Redux.Vuex.MobX 几种常用状态管理模式的总结,偏向于概念层面,不涉及过多代码. 状态管理 什么是状态管理? 状态管理就是,把组件之间需要共享的状态抽取出来,遵循特定的 ...

  5. 【miscellaneous】IP多播技术及其编程

    标  题: IP多播技术及其编程 发信站: 幽幽黄桷兰 (Mon Jun 16 10:35:39 2003) 转信站: SMTH!maily.cic.tsinghua.edu.cn!news2.ues ...

  6. mongodb base

    数据库,集合(表),文档(行) 嵌入式关系 引用式关系

  7. rowkey散列和预分区设计解决hbase热点问题(数据倾斜)

    Hbase的表会被划分为1....n个Region,被托管在RegionServer中.Region二个重要的属性:Startkey与EndKey表示这个Region维护的rowkey的范围,当我们要 ...

  8. [AcWing303/304]任务安排2/3

    [AcWing303]任务安排2 有 \(N\) 个任务排成一个序列在一台机器上等待执行,它们的顺序不得改变.机器会把这 \(N\) 个任务分成若干批,每一批包含连续的若干个任务.从时刻 \(0\) ...

  9. SQL Server 验证身份证合法性函数(使用VBScript.RegExp)

    原文:SQL Server 验证身份证合法性函数(使用VBScript.RegExp) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wzy0623 ...

  10. Linux系列:进阶之jdk、X window安装与使用

    1.安装x window 分为两步: 1.安装 x window,执行指令yum groupinstall “X Window” 2.安装GNOME Desktop,执行指令yum groupinst ...