文件上传JQuery插件 ajaxFileUpload 不严谨的bug
博客专区 > andotorg 的博客 > 博客详情
文件上传JQuery插件 ajaxFileUpload 不严谨的bug
andotorg 发表于2周前
文件上传JQuery插件 ajaxFileUpload 不严谨的bug
  • 发表于 2周前
  • 阅读 713
  • 收藏 26
  • 点赞 0
  • 评论 8

腾讯云实验室 1小时搭建人工智能应用,让技术更容易入门 免费体验 >>>   

摘要: 我在工作中使用ajaxFileUpload这个JQuery插件之后感觉很好用,当时只做了单文件上传,但是没有做多文件上传,现在根据需求的需要,现在需要多文件上传,才发现了这个不严谨的小bug (小广告:利用空闲时间我的 ‘阅奏折’小程序正在加紧研发中)

前言

广大的开源中国社区博友们,我是一名刚出道的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
粉丝 6
博文 4
码字总数 1836
评论 (8)
骑着猪上高速
我用的也是ajaxFileUpload,除了返回值在源码要改一下
骑着猪上高速
//eval( "data = " + data );
data = JSON.stringify(data);
获取返回的 json, 其实还是好用的
chinleo
把fileElementId当成数组类型,组织数据传进去试试
chinleo

引用来自“chinleo”的评论

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

好吧,也不行那个i根本没用上啊,你源码获取是最新版吗
leixu2
webuploader 很好用 - -
雪吖头
很常用的功能。
simple_star
我直接传完一次后return了
竹叶青出于蓝
可以实现多文件上传的
×
andotorg
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: