bootstrap File Input 多文件上传插件使用记录(二)删除原文件
在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等。这篇主要介绍file input插件的编辑等。
使用场景:
在后台管理框架中,一条数据中包含不固定的多张图片属性,然后需要同其他数据一起做增删改查。多文件同时新增上一篇已经做过了,需要的请点击打开链接,但是编辑的时候,就需要吧原来上传的图片展示出来,然后可以进行删除和重新上传,,这就是我现在要做的功能。
直接上代码吧。。
1.HTML
- <form>
- .......//其他数据
- <div class="form-group" style="width:99%">
- <input id="update_bachPic" name="commoPicArr" type="file" multiple >
- </div>
- </form>
2.JS代码 当点击数据的编辑按钮,则通过后台返回的数据初始化编辑页面,并初始化文件上传插件。
- $("#update_bachPic").fileinput({
- language: 'zh', //语言
- uploadUrl:'<%=basePath%>/commodity/addCommodityPic', //上传地址
- showPreview: true, //展前预览
- showUpload: false, //显示上传按钮
- showCaption: false, //显示文字表述
- uploadAsync:false, //false 同步上传,后台用数组接收,true 异步上传,每次上传一个file,会调用多次接口
- removeFromPreviewOnError:true, //当选择的文件不符合规则时,例如不是指定后缀文件、大小超出配置等,选择的文件不会出现在预览框中,只会显示错误信息
- maxFileCount: 5,
- maxFileSize: 1024*10, //单位为kb,如果为0表示不限制文件大小
- allowedFileExtensions: ["jpg", "jpeg", "gif", "png","bmp"],
- previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
- overwriteInitial: false,
- initialPreviewAsData: true,
- initialPreview: [ //这里配置需要初始展示的图片连接数组,字符串类型的,通常是通过后台获取后然后组装成数组直接赋给initialPreview就行了
- "http://......img",
- "http://......img",
- ],
- initialPreviewConfig: [ //配置预览中的一些参数
- {caption: "transport-1.jpg", size: 329892, width: "120px", url: "deletePic", key: 1},
- {caption: "transport-2.jpg", size: 872378, width: "120px", url: "deletePic", key: 2}
- ]
- }).on('filepredelete', function(event, key, jqXHR, data) {
- console.log('Key = ' + key);
- console.log(jqXHR);
- console.log(data);
- });
注意:
配置initialPreview:[ ] 配置的是数组,也就是需要初始展示图片的地址数组,字符串类型,当然通常是通过ajax从后台获取到链接后再组装成数组直接赋给他就行了。
配置initialPreviewConfig:[ ]也是一个数组,他主要是配置预览图片的相关显示参数,名字啊、大小啊。但是最重要的配置是url,他是你在点击图中的删除按钮后,会调用的地址,然后通过ajax去后台删除原图片。配置key,表示删除的时候向后台传递的参数,看图:
很神奇,你会发现,在url中我只配置了deletePic,但是通过调试发现,删除请求的url竟然自动拼接了前面的一段url,我猜测可能是从上面的配置updateUrl而来,或者是从请求头中的Referer而来。
配置的key是请求传递的参数,实测发现名字key不能改成自己的其他名字,而且传递的值不能是对象,这就有个问题了,万一我想传多个值怎么办?那就自己动手丰衣足食,改造源码吧。。
3.更改fileinput.js源码
需求一:将key传递的参数改为: key: "{'id':'1','name':'name1'}"
注意:既然直接传递对象不行,那就传递json字符串吧,然后在源码中转换成json不就行了?
更改源码中2379行左右,当点击删除按钮时,会调用settings,里面就是已经配置好的参数,我们获取key值,然后将单引号替换成双引号,然后转换为json对象,替换data参数。
这里为什么要替换单引号为双引号,为什么不直接在key配置的时候就写双引号呢?别问,我试了,不行,转换会出错,要不就是传递不过来,不然我也不会使用这个多此一举的办法啊。。。你直接传递json字符串到后台,用后台代码解析为json也可以。。然后我们的调试请求发现传递的值就变成我们想要的了。。
好,传值的问题解决了。就可以点击按钮的时候去后台删除此图片了,并传递我们其他的参数。新选择的图片并不会调用后台方法,会直接删除的。
需求二:当用户点击删除按钮的时候,提示他这是原图片,并问他是否确认删除,确认后才去后台调用删除,取消则不删除。这是为了避免用户点错,而导致删除了原图片,那么久需要在后台调用ajax之前执行一段我们的提示代码。
解决:查看API,发现了这么几个事件可以调用。
$('#input-id').on('filepreremove', function(event, id, index) { //只是你删除重新选择的图片才会触发,而删除原图片不会触发。
console.log('id = ' + id + ', index = ' + index);
});
$('#input-id').on('filepredelete', function(event, key, jqXHR, data) { //就是在删除原图片之前触发,而新选择的图片不会触发。能满足我们的要求。
console.log('Key = ' + key);
});
解决一:
采用filepredelete时间监听,在删除之前询问用户是否确定,并在确定后执行后面的。如果采用一般bootstrap的询问框,都是采用回调的方式监听用户操作的,还没等回调结束,后面的代码就已经开始调用ajax执行删除了。所以需要一个js线程的暂停机制,类似于alert,当用户操作后再往下执行,原始的js confirm()方法可以实现询问,然后点击确定则继续执行,所以代码改为:
- $("#update_bachPic").fileinput({
- language: 'zh',
- uploadUrl:'<%=basePath%>/commodity/addCommodityPic',
- showPreview: true, //展前预览
- showUpload: false, //显示上传按钮
- showCaption: false, //显示文字表述
- uploadAsync:false,
- removeFromPreviewOnError:true,
- maxFileCount: 5,
- maxFileSize: 1024*10, //单位为kb,如果为0表示不限制文件大小
- allowedFileExtensions: ["jpg", "jpeg", "gif", "png","bmp"],
- previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
- overwriteInitial: false,
- initialPreviewAsData: true,
- initialPreview: urlArr,
- initialPreviewConfig: [
- {caption: "transport-1.jpg", size: 329892, width: "120px", url: "deletePic", key: "{'id':'1','name':'name1'}"},
- {caption: "transport-2.jpg", size: 872378, width: "120px", url: "deletePic", key: "{'id':'1','name':'name1'}"},
- ]
- }).on('filepredelete', function(event, key, jqXHR, data) {
- if(!confirm("确定删除原文件?删除后不可恢复")){
- return false;
- }
- });
当用户点击取消,则返回false,到源码中去阻止事件的继续执行。
在源码2323行左右,执行ajax方法中beforSend,我们在filepredelete中返回false,返回false则再return给beforSend,他就会停止执行ajax方法,从而达到我们的目的。
这种方法确实能实现我们的要求,但是使用原始的confirm难免有些难看,也不符合整个系统的UI。但是使用bootstrap其他的询问框,则没办法实现线程暂停机制。但是我们可以在他执行ajax之前去判断,从而阻止执行。
解决二:
更改源码2379行左右,当点击删除按钮时,调用$.ajax(setting)方法之前采用其他bootstrap询问插件来监听,当然你也可以把他封装成一个内部事件,在初始化fileinput的时候去监听,
好了,这就是一些简单的删除原文件的方法,其中不乏需要我们去更改源码来符合我们的需求。后面使用中还遇到什么问题,再来研究吧。
原文链接:http://blog.csdn.net/qing_gee/article/details/48949701
bootstrap File Input 多文件上传插件使用记录(二)删除原文件相关推荐
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用...
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用...
http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...
- Bootstrap文件上传插件File Input的使用
1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http://plugin ...
- java ajax多文件上传插件_jQuery Upload File 多文件批量上传插件 - 资源
jQuery File UPload 包含多个带有进度条的文件上传,能够兼容任意的服务端语言,例如 PHP.Python.Ruby on Rails.Java等,支持标准的HTML表单文件上传.jQu ...
- fileupload的回调方法_jQuery File Upload文件上传插件使用详解
本篇教程介绍了jQuery File Upload文件上传插件使用详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < jQuery File Upload 是一个 ...
- js插件---IUpload文件上传插件(包括图片)
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- jquery 文件上传插件_10个jQuery文件上传插件
jquery 文件上传插件 这篇热门文章于2016年7月更新,以反映文件上传插件的当前状态. 有关旧文章的评论已删除. 使用Ajax实施文件上传可能非常困难,特别是如果您需要拖放支持,图像预览或进度条 ...
- 20+ 个很棒的 jQuery 文件上传插件或教程(此文值得“推荐”和“收藏”)
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验.本文介绍20个jQuery的文件上传插件,其中有一些是教程. 1. Plupload Plupload ...
- uploadify多文件上传插件
这个插件是兼容IE8及以上版本的,实现了基本功能,底部有下载连接 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti ...
最新文章
- oracle数据库----SQL语句的实践(应用实例)
- Linux中表示“时间”的结构体和相关函数
- Linux下编译一个静态链接的程序的注意点
- 《论语》原文及其全文翻译 学而篇16
- python send 案例_python socket编程入门(编写server实例)+send 与sendall的区别与使用方法...
- ubuntu mysql备份_Ubuntu下进行MYSQL自动备份
- angularjs-指令ng-disable,ng-repeat,ng-checked
- web app会遇到那些问题
- 8086变址和指针寄存器
- python cnn 实例_基于CNN的纹理合成实践【附python实现】
- mysql 基本操作和问题
- Navicat for MySQL 1130 - Host ‘DeskTop-**‘ is not allowed to connect to this MySQL-server错误解决
- 不相交集java_不相交集类
- r语言中paste函数_R中的paste()函数-简要指南
- 知名互联网公司网站架构图
- 工具篇--时间转化,设置,格式
- chrome下载文件竟然都有缓存!
- java 单击按钮改变背景颜色_java点击按钮换背景颜色?
- c语言2059,C语言错误 error C2059: 语法错误:“)”以及 错误error C2065: “sockaddr”: 未声明的标识符...
- static变量与普通变量的区别