JS ajaxfileUpload 一次性上传多个input控件 上传多个文件
本方法适用于一次性上传多个input框输入的文件,如下图所示,任务是需要一次上传两个input框提供的两个文件。
具体方法:
1、修改ajax调用方法
如上图所示,只需要将ajaxFileUpload调用方法中的fileElementId参数写成数组的形式,数组内容就是你需要上传的文件输入框的name属性值
2、更改ajaxfileupload.js插件,插件随便百度一下就能下载到了。
更改插件的内容有两处:(特此说明,百度上有很多帖子都写了很多类似的方法,但却忽略了下文需要修改的第二处内容,导致上传出错)
1)、找到插件中的 createUploadForm :function(id, fileElementId),然后按照下图指示的方法,修改两个地方,下图的左边是原插件,右边是修改过后的插件。
图片看起来清晰,为了方便大家,附上修改过后的代码,如下:
createUploadForm : function(id, fileElementId) {
// create form
var formId = 'jUploadForm' + id[0];
var fileId = 'jUploadFile' + id[0];
var form = jQuery('<form action="" method="POST" name="'
+ formId + '" id="' + formId
+ '" enctype="multipart/form-data"></form>');
if(typeof(fileElementId) == 'string'){
fileElementId = [fileElementId];
}
for(var i in fileElementId){
var oldElement = jQuery('#' + fileElementId[i]);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', 'jUploadFile' + fileElementId[i]);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
}
// set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
},
2)、需要修改插件的第二处:createUploadIframe方法,修改内容如下图所示:
完成这两大步骤就可以实现ajax一次性上传多个控件的文件了。
JS ajaxfileUpload 一次性上传多个input控件 上传多个文件的更多相关文章
- AutoIt上传非input控件方式的文件脚本
AutoIt目前最新是v3版本,这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作.它利用模拟键盘按键,鼠标移动和窗口/控件的组合来实现自动 ...
- 给上传文件的input控件"美容"
作为一名前端程序猿呢,在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮.刚好菜鸟我最近工 ...
- 给上传文件的input控件“美容”
在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮. demo: html代码 <b ...
- MVC项目使用easyui的filebox控件上传文件
开发环境:WIN10+IE11,浏览器请使用IE10或以上版本 开发技术框架MVC4+JQuery Easyui+knockoutjs 效果为弹出小窗体,如下图 1.前端cshtml文件代码(只包含文 ...
- js 读取本地文件(必须通过input控件才能实现) 及 下载文件
js 操作 文件的实现原理: 1.js是不能直接操作(读写)文件的,html的 input[type="file"] 控件是可以读取文件数据(获取文件数据流)的.js可以获取这个 ...
- 使用NeatUpload控件实现ASP.NET大文件上传
使用NeatUpload控件实现ASP.NET大文件上传 一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不 ...
- FileUpload的控件上传excel
在一个使用FileUpload的控件上传excel,读取excel的数据 因为上传的路径一直被限定在C:\Program\IIS\Express 一直限制这个文件下, 想要解决这个问题. 在谷歌浏览器 ...
- 自定义type为file型input控件+该控件具有本地图片预览功能
最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...
- 小程序中点击input控件键盘弹出时placeholder文字上移
最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...
随机推荐
- android 读取系统文件 wpa_supplicant
1,须要权限 <uses-permission android:name="android.permission.ACCESS_SUPERUSER" /> 2,下载 R ...
- Mybatis实现 --文件夹
本文是关于MyBatis的实现机制的探索,文章大量參考了网络上已有的相关文章并结合最新版本号的Mybatis做的整理 文件夹例如以下: Mybatis实现[1] ---Mybatis Basic[Ja ...
- 基于FPGA的图像显示
基于FPGA的图像显示 作者:lee神 这几天一直在调试FPGA的图像显示系统,今天终于成功,图像不在闪烁,也不再边框缺失. 基于FPGA的图像处理的第一课应该是基于FPGA的图像显示,只有图像正常显 ...
- Java的单例模式
单例模式:单例模式确保其一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式又分为:懒汉式,饿汉式等; 特点: a.单例只有一个实例. b.必须自己创建自己唯一的实例 c.单例类必须 ...
- 【SqlServer系列】聚合函数
1 概述 本篇文章简要回顾SQL Server 聚合函数,MAX,MIN,SUM,AVG,SUM,CHECKSUM_EGG,COUNT,STDEV,STDEVP,VAR,VARP. 2 具体 ...
- 【Jquery】之DOM操作
Questions 本篇文章主要讲解Jquery中对DOM的操作,主要内容如下: 1 内容区 1.1 .addClass() (1).addClass(className) <!DOCT ...
- 【转】Spring Bean单例与线程安全
一.Spring单例模式及线程安全 Spring框架中的Bean,或者说组件,获取实例的时候都是默认单例模式,这是在多线程开发的时候需要尤其注意的地方. 单例模式的意思是只有一个实例,例如在Sprin ...
- 体验mssql-cli
1. 背景 安装SQL Server on Linux之后,在命令行下使用sqlcmd,你会发现代码提示,语法高亮,甚至连多行复制都不支持,相比之下,MySQL的命令行客户端还好用多了.只做简单的命令 ...
- springboot小技巧(转)
一些springboot小技巧.小知识点 初始化数据 我们在做测试的时候经常需要初始化导入一些数据,如何来处理呢?会有两种选择,一种是使用Jpa,另外一种是Spring JDBC.两种方式各有区别下面 ...
- Mybatis中模糊查询的各种写法(转)
. sql中字符串拼接 SELECT * FROM tableName WHERE name LIKE CONCAT(CONCAT('%', #{text}), '%');或者 <if test ...