html:

 <div class="col-md-4 col-sm-4">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">合同附件</div>
<div class="addcaption">
添加附件
<input type="file" onchange="new_preview(this)">
</div>
</div>
<div class="portlet-body light">
<table class="table table-hover table-bordered" id="filesTable">
<thead>
<tr>
<th>文件名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>

js:

上传----

var files = [];
function new_preview(file){
var fileObj = file.files[0];
var formData = new FormData();
formData.append('file', fileObj);
formData.append('contractNo', file_contractNo);
var options = {
url: webroot + "/ht/uploadAndSaveFile",
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(rsp) {
console.log(rsp);
var innerHtml = '<tr><td>' + rsp.result.fileName + '</td>' +
'<td>'+
'<button class="btn green" data-uri="' + rsp.uri + '" onclick="downloadFiles(this)">'+
'<i class="fa fa-download"></i>'+
'</button>'+
// '<button class="btn red" data-uri="' + rsp.uri + '" onclick="new_removeFile(this)">'+
// '<i class="fa fa-trash"></i>'+
// '</button>'+
'</td>'+
'</tr>';
$("#filesTable tbody").append(innerHtml);
files.push(rsp);
},
error: function(e) {
hint("网络错误!");
}
};
$.ajax(options);
};

下载--------

function new_downloadFiles(id) {
if (typeof(downloadFiles.iframe) == "undefined") {
var iframe = document.createElement("iframe");
downloadFiles.iframe = iframe;
document.body.appendChild(downloadFiles.iframe);
}
downloadFiles.iframe.src = webroot  +  "/ht/download?id=" + id;
downloadFiles.iframe.style.display = "none";
};

删除-------(未提供接口,只做html删除和数组删除)

function new_removeFile(e) {
var _uri = $(e).attr("data-uri");
for (var n = 0; n < files.length; n++) {
if (files[n].uri == _uri) {
files.splice(n, 1);
}
}
$(e).parent().parent().remove();
}

(获取附件的列表)

    for (var m = 0; m < data.files.length; m++) {
files_Html += '<tr><td>' + data.files[m].fileName + '</td>' +
'<td>'+
'<button class="btn green" onclick="new_downloadFiles(' + "'" + data.files[m].id + "'" + ')">'+
'<i class="fa fa-download"></i>'+
// '<button class="btn red" onclick="new_removeFile(' + "'" + data.files[m].id + "'" + ')">'+
// '<i class="fa fa-trash"></i>'+
'</td></tr>';
}
$("#filesTable tbody").append(files_Html);

file 文件上传,下载,删除的更多相关文章

  1. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  2. Struts2 文件上传,下载,删除

    本文介绍了: 1.基于表单的文件上传 2.Struts 2 的文件下载 3.Struts2.文件上传 4.使用FileInputStream FileOutputStream文件流来上传 5.使用Fi ...

  3. java操作FTP,实现文件上传下载删除操作

    上传文件到FTP服务器: /** * Description: 向FTP服务器上传文件 * @param url FTP服务器hostname * @param port FTP服务器端口,如果默认端 ...

  4. [java]文件上传下载删除与图片预览

    图片预览 @GetMapping("/image") @ResponseBody public Result image(@RequestParam("imageName ...

  5. Java 客户端操作 FastDFS 实现文件上传下载替换删除

    FastDFS 的作者余庆先生已经为我们开发好了 Java 对应的 SDK.这里需要解释一下:作者余庆并没有及时更新最新的 Java SDK 至 Maven 中央仓库,目前中央仓库最新版仍旧是 1.2 ...

  6. 艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输)(一)

    艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输) 该系统基于开源的networkComms通讯框架,此通讯框架以前是收费的,目前已经免费并开元,作者是英国的,开发时间5年多,框架很稳定. 项 ...

  7. 【FTP】FTP文件上传下载-支持断点续传

    Jar包:apache的commons-net包: 支持断点续传 支持进度监控(有时出不来,搞不清原因) 相关知识点 编码格式: UTF-8等; 文件类型: 包括[BINARY_FILE_TYPE(常 ...

  8. FastDFS实现文件上传下载实战

    正好,淘淘商城讲这一块的时候,我又想起来当时老徐让我写过一个关于实现FastDFS实现文件上传下载的使用文档,当时结合我们的ITOO的视频系统和毕业论文系统,整理了一下,有根据网上查到的知识,总结了一 ...

  9. JavaWeb实现文件上传下载功能实例解析

    转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...

  10. java web 文件上传下载

    文件上传下载案例: 首先是此案例工程的目录结构:

随机推荐

  1. PHP调用百度地图API

    //百度地理位置接口API $lat = 39.912108791024; $lng = 116.48299016095; $ak = "5slgyqGDENN7Sy7pw29IUvrZ&q ...

  2. Kubernetes集群搭建之Etcd集群配置篇

    介绍 etcd 是一个分布式一致性k-v存储系统,可用于服务注册发现与共享配置,具有以下优点. 简单 : 相比于晦涩难懂的paxos算法,etcd基于相对简单且易实现的raft算法实现一致性,并通过g ...

  3. iReport 5.6.0 组件面板为空 get小技巧

    问题描述 本人使用的是iReport 5.6.0版本,正常安装,打开后,创建了一个报表实例,但是,菜单栏--> 工具--> 组件面板 为空.效果如下: 这就尴尬了,没有组件面板,还怎么绘制 ...

  4. maven下载其源代码包并关联

    有时我们的源码可能会失去关联,然后需要我们在当前项目中(含有pom.xml文件的那个目录)按住shift然后在当前项目文件夹空白处右键,选择在此处打开命令输入一下命令: 1. 下载所有在POM中的的s ...

  5. .Net Self Hosting 的几种方式

    写在前面: IIS是Windows平台非常关键的组件,它是微软自带的Web服务器,可以很方便的帮助我们运行起一个网站,WebApi等服务,提供给外部来访问.即使它被很多java或者ruby的同学各种鄙 ...

  6. Netty源码分析(五):EventLoop

    上一篇主要介绍了一下EventLoopGroup,本篇详细看下它的成员EventLoop. 类结构 NioEventLoop继承自SingleThreadEventLoop,而SingleThread ...

  7. 1.Magicodes.NET框架之路——起航

    1.Magicodes.NET框架之路--起航 前言 从事开发也好几年了,并且最近一直在做架构搭建的工作.这些时间,最大的感悟就是: 只有自己理解了的才是自己的. 对架构这块,若欲立之,必先破之. 故 ...

  8. JSON初步认识

    一.背景 曾经有一段时间,XML是互联网传输结构化数据的标准.但是XML过于繁琐.冗长.JSON2001年就开始应用了,2006年,DC才把Json提交给IETF. 与XML相比,Json是在Java ...

  9. TCP首部

    TCP的首部格式 字段解释 源端口和目的端口 用于多路复用/分解来自或送到上层应用的数据 数据偏移 TCP中数据的开始处距离TCP报文段的起始位置有多远 == TCP报文段的首部长度 表示长度以32位 ...

  10. python面向对象入门(1):从代码复用开始

    本文从代码复用的角度一步一步演示如何从python普通代码进化到面向对象,并通过代码去解释一些面向对象的理论.所以,本文前面的内容都是非面向对象的语法实现方式,只有在最结尾才给出了面向对象的简单语法介 ...