ajaxFileUpload.js插件支持多文件上传的方法_javascript技巧

前提条件:

ajaxFileUpload.js插件多文件上传

步骤:

1、修改源码,(源码只支持单个文件的上传):

复制代码 代码如下:

//修改前代码-------
//var oldElement = jQuery('#' + fileElementId);
//var newElement = jQuery(oldElement).clone();
//jQuery(oldElement).attr('id', fileId);
//jQuery(oldElement).before(newElement);
//jQuery(oldElement).appendTo(form);
//修改前代码-------
//修改后代码-------
for(var i in fileElementId){
var oldElement = jQuery('#' + fileElementId[i]);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
}
//修改后代码-------

2、使用方法:

复制代码 代码如下:

$.ajaxFileUpload({
url : "./upload/upload.action",
secureuri : false,
//fileElementId:'uploadfile1',//原使用方法
fileElementId : ['uploadfile1','uploadfile2','uploadfile3','uploadfile4','uploadfile5'],//现使用方法
dataType : 'json',
success : function(data) {
ajaxLoadEnd();
if (data.result == "success") {
$.messager.alert('信息','导入成功。','info');
} else {
$('#import_right').dialog('open');
$.messager.alert('信息','导入失败。<br>错误信息:'+data.message,'error');
}
},
error : function(data, status, e)
{
ajaxLoadEnd();
$.messager.alert('信息','导入失败。<br>错误信息:网络异常或表单数据错误。','error');
}
});

时间: 2024-10-07 11:38:39

ajaxFileUpload.js插件支持多文件上传的方法_javascript技巧的相关文章

Bootstrap的fileinput插件实现多文件上传的方法_javascript技巧

*1.bootstrap-fileinput 插件git下载地址 https://github.com/kartik-v/bootstrap-fileinput.git 2.解决使用bootstrap-fileinput得到返回值 上传图片 $("#file-0a").fileinput({ uploadUrl : "/upload_img",//上传图片的url allowedFileExtensions : [ 'jpg', 'png', 'gif' ], ov

Struts2+jquery.form.js实现图片与文件上传的方法_jquery

本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法.分享给大家供大家参考,具体如下: jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件.官方网站:http://plugins.jquery.com/form/ 结合Struts2三步轻松实现文件上传 一般是针对一个页面可能不止一个Form表单,所以在一个面提交表单会影响到另一个表单,为此,图片上传表单就可以使用无刷新提交方式上传,也就是异步上传,这时jquery.from.js就派上用

js 实现 input type=&amp;quot;file&amp;quot; 文件上传示例代码_javascript技巧

在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能. 看代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he

PHP实现多文件上传的方法_php技巧

本文实例讲述了PHP实现多文件上传的方法.分享给大家供大家参考.具体实现方法如下: <?php define('ROOT','D:/Program Files/www/test/'); class Files_Tool{ protected static $allowExt=array('.jpg','.jpeg','.png','.gif','.bmp','.svg','.chm','.pdf','.zip','.rar','.tar','.gz','.bzip2','.ppt','.doc'

php使用ereg验证文件上传的方法_php技巧

本文实例讲述了php使用ereg验证文件上传的方法.分享给大家供大家参考.具体分析如下: ereg格式如下: 复制代码 代码如下: ereg(正规表达式,字符串,[匹配部分数组名]); 这里利用了ereg来验证用户上传的文件类型与文件名是否是符合文件命名规则,实例代码如下: 复制代码 代码如下: if( !is_uploaded_file($upfile) )  {   echo("你什么都没有上传哦!");   exit();  }  else  {   if( !ereg(&quo

AngularJS+Bootstrap实现多文件上传与管理_javascript技巧

最近一个项目中需要实现多文件上传与管理,而项目是基于bootstrap开发的,所以查了一些bootstrap文件上传插件,最后发现还是bootstrap-fileinput最美观,该插件可以实现多文件的上传与管理(插件官方地址:http://plugins.krajee.com/file-input),具体的效果如下:   (bootstrap-fileinput不局限于图片上传,也可以实现文件上传,但图片的缩略图容易辨识,这里就以图片上传为例)  该插件基本的操作可以参考:JS文件上传神器bo

JavaScript File API实现文件上传预览_javascript技巧

一.概述以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽相

JavaScript File API文件上传预览_javascript技巧

对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件.实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名.再获取服务器返回的地址,然后做预览. 但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览.在网络比较慢的情况下,这样真的很折腾. 所以我们某些时候需要先预览

Bootstrap自定义文件上传下载样式_javascript技巧

在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框架实现文件上传的全部代码,敬请期待. 先看图片示例: 本示例包括下载样本文件样式和上传文件样式. 直接先上代码,最后讲解: <div class="form-group col-md-12 has-feedback" id="file"> <label