//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. linux下编译安装ACE-6.4.2(adpative communication environment)

    1.环境 CentOS-6.5-x86_64-bin-DVD1.iso VMware_workstation_full_12.5.2 (2).exe ACE-6.4.2.tar.gz 下载链接:htt ...

  2. 你真的理解Java中的try/catch/finally吗?

    看几个例子,回顾一下执行顺序 例子1 无异常,finally中的return会导致提前返回 public static String test() {    try {        System.o ...

  3. matlab中如何给一个矩阵中的某几个特定位置赋值

    用sub2ind >> a=zeros(5); i = [2;3;4]; j = [1;4;2]; >> a(sub2ind(size(a), i, j))=1 a = 0 0 ...

  4. C语言递归之二叉树的最大深度

    题目描述 给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. 说明: 叶子节点是指没有子节点的节点. 示例 给定二叉树 [3,9,20,null,null,15 ...

  5. pandas的用法

    1.a = pandas.read_csv(filepath):读取.csv格式的文件到列表a中,文件在路径filepath中 pandas.core.frame.DataFrame是pandas的核 ...

  6. pycharm右键运行unittest、pytest文件

    在实际学习过程中,有时候会出现右键运行文件,但没有任何结果的情况.这就是没有使用unittest/pytest 的方式运行. 解决方法: 添加好

  7. Linux文件属性改变命令chown-chgrp-chattr-lsattr实践

    chown 语法: chattr.lsattr  更改文件属性

  8. 【3.3】mysql中的Federated存储引擎,远程表,相当于sql server的linked server

    MySQL中针对不同的功能需求提供了不同的存储引擎.所谓的存储引擎也就是MySQL下特定接口的具体实现. FEDERATED是其中一个专门针对远程数据库的实现.一般情况下在本地数据库中建表会在数据库目 ...

  9. spark-scala-java实现wordcount

    引入:spark-scala-java实现wordcount 1.spark-scala实现wordcount package com.cw.scala.spark import org.apache ...

  10. 【LOJ】#3032. 「JOISC 2019 Day1」馕

    LOJ#3032. 「JOISC 2019 Day1」馕 处理出每个人把馕切成N段,每一段快乐度相同,我们选择第一个排在最前的人分给他的第一段,然后再在未选取的的人中选一个第二个排在最前的切一下,并把 ...