web端文件上传，预览，下载，删除

//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);

})

},

原文地址：https://www.cnblogs.com/cx709452428/p/9212364.html

时间： 2024-08-28 12:29:14

web端文件上传，预览，下载，删除的相关文章

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

首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css&qu

移动端图片上传预览

前天要做wap版的图片上传预览,找了好半天才找到比较适合的插件,我在该插件的基础上修改了一些东西,比如:上传后的图片删除后不能再添加.不能限制上传图片的数量. input虽然有multiple(多选),但是android目前是不支持的. 该插件控制不了不能上传同一张图片,暂时没有思路解决这个问题(:′д｀)ゞ 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset=&

html5文件上传预览

function DragUploadFile(d) { this.dom = document.getElementById(d); //拖拽的Dom this.FileType; //上传文件类型限制 this.FileTypeNoMsg; //上传文件限制说明 this.imgCallback; //获取文件成功 回调方法 this.AjaxPath; //文件上传路径 this.AjaxCallback; //文件上传完成 回调方法 //阻止浏览器默认事件 document.addEve

文件上传预览

<input type="file" onchange="puul(this)"  /> function puul(file) { var img = document.getElementById("banneryl");         var reader = new FileReader();         reader.onload = function (evt) {             img.src = evt

h5图片上传预览

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

html,图片上传预览，input file获取文件等相关操作

input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 var path=obj.value;//获取文件当前路径 var size=obj.files[0].size;//获取文件大小 var prefix=path.substring( path.lastIndexOf('\\')+1 );//获取文件名的前缀名(文件格式) var suffix=path.

移动端 js 实现图片上传 预览

方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> /

Web Uploader文件上传

引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF. <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webu

Web Uploader文件上传插件

http://www.jq22.com/jquery-info2665 插件描述:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用. 采用大文件分片并发上传,极大的提高了文件上传效率. 分片.并发 分片与并发结合,将一