//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. Vue.js父子组件如何传值 通俗易懂

    父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...

  2. React Native常用的第三方开源库

    记录一下自己暂目前了解和使用的一些开源库和官方文档和优秀博客介绍,希望对你有帮助☺️: 1.Toast: https://github.com/magicismight/react-native-ro ...

  3. 使用checked和unchecked来对整数溢出进行检测和忽略

    在C#中,整数int32的取值为-2147483648~2147473647(可以通过int.MaxValue和int.MinValue获得)当超出这个范围后,编译器不会进行检查,仍然会进行运算,但得 ...

  4. docker清理

    # 删除退出的容器docker rm $(docker ps -qa --no-trunc --filter "status=exited") # 删除悬挂镜像docker rmi ...

  5. 【无线安全实践入门】破解WiFi密码的多个方法

    本文希望可以帮助到想要学习接触此方面.或兴趣使然的你,让你有个大概的印象. 文中可能存在错误操作或错误理解,望大家不吝指正. !阅前须知! 本文是基于我几年前的一本笔记本,上面记录了我学习网络基础时的 ...

  6. 【机器学习】ICA特征提取

    看完了ICA的一整套原理介绍后,感觉完整的介绍和andrew ng的课程中的ICA特征提取关系不是很大:在ICA的理论中,主要用于盲源分离的,也就是混合的观测数据X,通过一个正交的且其范数为1的分离矩 ...

  7. 【VS开发】这就是COM组件

    [实例]这就是COM组件 时间 2012-02-21 10:49:15  CSDN博客 原文  http://blog.csdn.net/btwsmile/article/details/727849 ...

  8. go爬虫系列

    一.go语言爬取豆瓣电影top250 package main import ( "net/http" "io/ioutil" "os" & ...

  9. Linux 脚本

    1.理解Linux Shell和基本Shell脚本语言的小贴士(一) http://blog.jobbole.com/63952/ ------伯乐在线

  10. cm api

    cm API:https://github.com/cloudera/cm_api/tree/master/python/examples/auto-deploy#看集群有几个clustercurl ...