file 文件上传,下载,删除
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 文件上传,下载,删除的更多相关文章
- SpringMVC ajax技术无刷新文件上传下载删除示例
参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...
- Struts2 文件上传,下载,删除
本文介绍了: 1.基于表单的文件上传 2.Struts 2 的文件下载 3.Struts2.文件上传 4.使用FileInputStream FileOutputStream文件流来上传 5.使用Fi ...
- java操作FTP,实现文件上传下载删除操作
上传文件到FTP服务器: /** * Description: 向FTP服务器上传文件 * @param url FTP服务器hostname * @param port FTP服务器端口,如果默认端 ...
- [java]文件上传下载删除与图片预览
图片预览 @GetMapping("/image") @ResponseBody public Result image(@RequestParam("imageName ...
- Java 客户端操作 FastDFS 实现文件上传下载替换删除
FastDFS 的作者余庆先生已经为我们开发好了 Java 对应的 SDK.这里需要解释一下:作者余庆并没有及时更新最新的 Java SDK 至 Maven 中央仓库,目前中央仓库最新版仍旧是 1.2 ...
- 艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输)(一)
艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输) 该系统基于开源的networkComms通讯框架,此通讯框架以前是收费的,目前已经免费并开元,作者是英国的,开发时间5年多,框架很稳定. 项 ...
- 【FTP】FTP文件上传下载-支持断点续传
Jar包:apache的commons-net包: 支持断点续传 支持进度监控(有时出不来,搞不清原因) 相关知识点 编码格式: UTF-8等; 文件类型: 包括[BINARY_FILE_TYPE(常 ...
- FastDFS实现文件上传下载实战
正好,淘淘商城讲这一块的时候,我又想起来当时老徐让我写过一个关于实现FastDFS实现文件上传下载的使用文档,当时结合我们的ITOO的视频系统和毕业论文系统,整理了一下,有根据网上查到的知识,总结了一 ...
- JavaWeb实现文件上传下载功能实例解析
转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...
- java web 文件上传下载
文件上传下载案例: 首先是此案例工程的目录结构:
随机推荐
- Mysql数据库异常
1. Mysql数据库异常 1.1. 数据库问题之Got error 28 from storage engine 原因首先检查磁盘是否已满,df -h一下 很可能是日志数据过大,查看该目录下文件夹和 ...
- 基于vue-cli3.0构建功能完善的移动端架子,主要功能包括
webpack 打包扩展 css:sass支持.normalize.css._mixin.scss._variables.scss vw.rem布局 跨域设置 eslint设置 cdn引入 路由设计. ...
- VSCode typescript ctrl+shift+b can't be compiled error:TS5007
环境: vscode:1.12.2 node 7.4.0 TypeScript:2.3.2 从svn 更新下来,别的电脑环境编译是没问题的,在我的电脑上编译失败并出现以下错误 error TS5007 ...
- Java垃圾回收(GC)机制详解
一.为什么需要垃圾回收 如果不进行垃圾回收,内存迟早都会被消耗空,因为我们在不断的分配内存空间而不进行回收.除非内存无限大,我们可以任性的分配而不回收,但是事实并非如此.所以,垃圾回收是必须的. 二. ...
- Android--UI之ImageSwitcher
前言 这篇博客来聊一聊AndroidUI开发中ImageSwitcher控件的使用.ImageSwitcher控件与ImageView类似,都可以用于显示图片,但是ImageSwitcher通过名字可 ...
- 《JavaScript总结》js的运行机制
首先大家都知道javascript是单线程语言. 什么是单线程呢?比如我们去车站买票,只有一个售票窗口,大家排队买票,需要前面的人买完票,后面的人才能买票. 那为什么javascript不能是多线程呢 ...
- Consul安装使用
安装 安装环境: Mac 我参照官网下载,然后解压,然后添加到PATH,并不能用.最终使用brew安装成功. brew install consul 安装成功后,文件位于/usr/local/Cell ...
- MODIS数据的下载(新地址)
Modis数据下载方法 1.1打开网址 浏览器输入地址:https://ladsweb.nascom.nasa.gov/search 注:需要一定的等待时间,如果一直打不开,就需要FQ.(网址加载了g ...
- 【原创】浅说windows下的中断请求级IRQL
一 中断分类 根据中断源不同,可以将中断分为 硬件中断:硬件上产生的中断,可以来自处理器的内部和外部.处理器的外部中断可以来自各种PIN信号接口和Local APIC的LINT0和LINT1引脚,以及 ...
- noteless的博客导航页 所有文章的导航页面
导航 <spring springmvc mybatis maven 项目整合示例系列-导航页> <JAVA 基础知识点拾遗系列 JAVA学习 -1层 导航页> <计 ...