文档章节

文件上传JQuery插件 ajaxFileUpload 不严谨的bug

andotorg
 andotorg
发布于 2017/09/12 15:57
字数 921
阅读 798
收藏 26
点赞 0
评论 9

前言

广大的开源中国社区博友们,我是一名刚出道的java程序员,由于工作中需要做前端页面一块开发,所以在JavaScript也每天在使用,每天在学习,在我提出bug之中如果你觉得这个问题我说的不对欢迎在在下方评论区深怼我哦!

简介

我在工作中使用ajaxFileUpload这个JQuery插件之后感觉很好用,当时只做了单文件上传,但是没有做多文件上传,现在根据需求的需要,现在需要多文件上传,才发现了这个不严谨的小bug

文件上传控件,还没来得及美化

主文

我每次选择文件之后点击保存业务数据和文件的时候,在chrome游览器的开发者工具的network中看到的是这样的数据,很多很乱还有点杂,并且文件总是重复。

我选择了两个文件

如果我选择了一个文件之后,ajax往后台传输文件的时候那就会出现6个重复文件,名字都一模一样

重复的上传

后来我特意把上传控件的id修改了一下原来id为:myfile ,后来改为myfilea 现在就有意思了,我修改完id之后我进行重新上传文件之后我惊奇的发现的,出现了7个重复的文件,我在想文件重复的个数怎么和id字符的个数相同呢?

然后我就开发查看ajaxFileUpload.js插件的源码,看到它创建form的是否惊奇的发现,哇塞!循环创建文件历史存储的form时怎么回事按照id来进行foreach区循环呢??

循环id字符个数

看看代码:

createUploadForm: function(id, fileElementId, data) {
        //create form 
        var formId = 'jUploadForm' + id;
        var fileId = 'jUploadFile' + id;
        var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
        /********************原版 bug 已解决 **********************/
        /*for (var i in fileElementId) {   //原版
            var oldElement = jQuery('#' + fileElementId);
            var newElement = jQuery(oldElement).clone();
            jQuery(oldElement).attr('id', fileId);
            jQuery(oldElement).before(newElement);
            jQuery(oldElement).appendTo(form);
        }*/
        //修改版
        var oldElement = jQuery('#' + fileElementId);
        var newElement = jQuery(oldElement).clone();
        jQuery(oldElement).attr('id', fileId);
        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');
        if (data) {
            for (var i in data) {
                $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
            }
        }
        return form;
    },

最后放一点java代码

        @RequestMapping("/savePicTask")
	@ResponseBody
	public String saveTask(HttpServletResponse response,HttpServletRequest request) throws SQLException, Exception
	{	
		//对上传的图片进行处理		
		response.setCharacterEncoding("text/html;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
                String savePath =  request.getSession().getServletContext().getRealPath("/")+"upload\\";
                JSONObject json = new JSONObject();
                String fileNames = "";
        
	        MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;//request强制转换注意
	       Iterator<String> fns = mRequest.getFileNames();
	       while (fns.hasNext()) {
	    	  String fn = fns.next();
	    	  System.err.println(fn);
	    	  List<MultipartFile> file = mRequest.getFiles(fn);
	    	  for (MultipartFile multipartFile : file) {
	    		String fileName = multipartFile.getOriginalFilename();
				System.err.println(fileName);
				boolean fileSaveState = SaveAutoFormFile.saveFile(multipartFile.getInputStream(), savePath, fileName);
				if(fileSaveState)
					fileNames += "upload\\"+fileName+",";
			}
	    	fileNames = fileNames.substring(0, fileNames.length()-1);
		}
      }

作者当时在想什么,为什么给我创建这么多重复的文件呢?难道你有其他的用处吗?

所以说把循环去掉后台就能得到真实的文件上传个数!

不知道这算不算是一个不严谨的bug

反正我觉得是 哈哈,

修改的文件的 github地址: https://github.com/andotorg/ajaxFileUpload.git

修改的文件的 gitee地址: https://gitee.com/andotstudio/ajaxFileUpload.git

感谢原作者提供的多文件上传的ajax异步控件
这里声明:我只是修改的bug,我没有参与编写此插件,此插件原作者不是发博文本人

© 著作权归作者所有

共有 人打赏支持
andotorg

andotorg

粉丝 6
博文 12
码字总数 4737
作品 0
济南
后端工程师
加载中

评论(9)

andotorg
andotorg

引用来自“骑着猪上高速”的评论

//eval( "data = " + data );
data = JSON.stringify(data);
获取返回的 json, 其实还是好用的
谢谢
竹叶青出于蓝
竹叶青出于蓝
可以实现多文件上传的
s
simple_star
我直接传完一次后return了
雪吖头
雪吖头
很常用的功能。
leixu2
leixu2
webuploader 很好用 - -
chinleo
chinleo

引用来自“chinleo”的评论

把fileElementId当成数组类型,组织数据传进去试试

好吧,也不行那个i根本没用上啊,你源码获取是最新版吗
chinleo
chinleo
把fileElementId当成数组类型,组织数据传进去试试
骑着猪上高速
骑着猪上高速
//eval( "data = " + data );
data = JSON.stringify(data);
获取返回的 json, 其实还是好用的
骑着猪上高速
骑着猪上高速
我用的也是ajaxFileUpload,除了返回值在源码要改一下
jQuery插件AjaxFileUpload实现ajax文件上传

1、引入AjaxFileUpload插件相关的js <script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script><script type="text/javascript" src="<%=basePath%>resou......

刘yu
2015/04/22
0
0
针对IE 安全问题file无法上传的问题 ajaxFileUpload

<!doctype html><html><head><meta charset="UTF-8"><title>Document</title><style>.wrap{background: gray;width: 100px;height: 30px;overflow: hidden;/关键属性/position: relative;}.b......

无头骑士
2015/01/30
0
2
简单的jQuery插件ajaxfileupload实现ajax上传文件例子

页面代码: <html> <!-- 引入相关的js文件,相对路径 --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/ajaxfileupload.js"></sc......

清华漏子
2014/07/13
0
0
10个免费的javascript富文本编辑器(jQuery and non-jQuery)

祝愿园子里的朋友圣诞节快乐。 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascript富文本编辑器使我们添...

老鸟的空间
2014/07/05
0
1
ajaxFileUpload.js

ajaxFileUpload.js和jquery版本有对应关系,一般不支持大于等于1.8的jquery版本 问题1:如楼主所说,jQuery.handleError is not a function 原因是,经测试handlerError只在jquery-1.4.2之前...

chem_dev
2015/08/11
0
0
ajaxFileUpload图片上传、限制后缀和张数 带参数

ajaxFileUpload图片上传、限制后缀和张数 带参数 HTML: <input type="file" name="img" id="fileToUpload" style="width:180px;" onchange="ajaxFileUpload(this);" /><span class="info">(......

markYun
2013/09/07
0
1
SmbFile (如何做共享文件上传功能)

1.组件上传的插件 ajaxfileupload.js,上面是官方的例子 第一个链接是官方的的javascript http://www.phpletter.com/our-projects/ajaxfileupload/ 第二个链接是网上找到的demo,我就不贴上我的...

skyim
2013/07/02
0
0
ajax上传文件 预览/七牛云AJAX上传

ajaxfileupload下载:链接: http://pan.baidu.com/s/1dDtX6Pb 密码: qqi2 $('.upload-success').show(300).delay(3000).hide(300); //2S后隐藏 需要用到:ajaxfileupload <!DOCTYPE html><htm......

wsy5344
2015/06/06
0
1
如何让ajaxfileupload.js支持IE9,IE10,并可以传递多个参数?

exception : SCRIPT5022: DOM Exception: INVALIDCHARACTERERR (5) 思路分析: 第一步:兼容IE9,firefox,Opera,Safari等浏览器; var iframe = document.createElement("iframe"); ifram......

cookqq
2013/07/16
0
1
tiny_mce的本地图片上传插件

做项目是需要将本地图片上传到服务器,可是tinymce自带的image插件不能很好的实现, tinymce需要动的输入图片地址,这个地址还得是服务器上的地址。所以不满足需要,需要改进。 通常的办法就...

cookqq
2012/03/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

崛起于Springboot2.X之mysql读写分离升级版(22)

介绍:本人之前写了一篇博客关于mysql的读写分离,那个需要配置多个类,如今读写分离升级了,我们不需要配置任何java配置文件类就可以,因为有人为我们封装了,我们只管添加依赖就好了 注意:...

木九天
4分钟前
0
0
全新内存布局Android5 for one x

众所周知Android5.0默认ART模式,运行速度加倍,软件占用内存也加倍,我们one x这种元老机采用旧的内存布局,data空间2g ART模式下安装几个软件也就不够用了。最近逛国外的xda论坛,发现有大...

CrazyManDF
13分钟前
0
0
web3j转账

 web3 转账功能   为了完成以太坊交易,必须有几个先决条件   1、对方的以太坊地址   2、确定要转账的金额   3、自己地址的转账权限   4、大于转账金额的以太币,以太币转账其实就...

智能合约
14分钟前
0
0
10.28 rsync工具介绍 , rsync常用选项, rsync通过ssh同步

rsync远程同步 重点!重点!!重点!!! 例子 • rsync -av /etc/passwd /tmp/1.txt • rsync -av /tmp/1.txt 192.168.188.128:/tmp/2.txt rsync格式 • rsync [OPTION] … SRC DEST • rs......

Linux_老吴
28分钟前
0
0
iis php 环境搭建,非常详细的教程

准备篇 一、环境说明: 操作系统:Windows Server 2016 PHP版本:php 7.1.0 MySQL版本:MySQL 5.7.17.0 二、相关软件下载: 1、PHP下载地址: http://windows.php.net/downloads/releases/ph...

T_star
30分钟前
0
0
Day35 rsync通过服务同步

rsync通过服务同步 rsyncd.conf配置文件详解 port:指定在哪个端口启动rsyncd服务,默认是873端口。 log file:指定日志文件。 pid file:指定pid文件,这个文件的作用涉及服务的启动、停止等...

杉下
35分钟前
1
0
【最新最全】为 iOS 和 Android 的真机和模拟器编译 Luajit 库

编译 Luajit 库,的确是一个挑战。因为官网的教程,在当前版本的 Xcode 和 NDK 环境中,已经不适用了。以前只是编译了适用于真机的 Luajit 库。最近在尝试编译模拟器 Luajit 库,就顺便梳理了...

ios122
36分钟前
0
0
rsync至ssh同步

rsync: 文件同步工具,可实现“增量拷贝”;使用yum安装rsync包 常用选项:-a=-rtplgoD (-r同步目录,-t保持文件的时间属性,-p保持文件的权限属性,-l保持软连接,-g保持文件的属组,-o保持...

ZHENG-JY
41分钟前
1
0
TradingView 学习笔记

#前言 公司最后需要使用TradingView展示K线图走势。由于之前没接触过,拿到文档时一脸蒙逼。还好找到二篇文章+Demo代码,直接改改就行了。 #被批 由于上面的懵懂,有个问题困扰4个小时没解决...

hihubs
41分钟前
0
0
10.28 rsync工具介绍~10.31 rsync通过ssh同步

rsync命令是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件。rsync使用所谓的“rsync算法”来使本地和远程两个主机之间的文件达到同步,这个算法只传送两个文件的不同部分,而...

洗香香
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部