JS实现批量图片上传

应业务方要求，实现批量图片上传

1、HTML代码（data-form-data是设置参数）

<input id="fileuploadBatch" type="file" name="uploadBatch[]" data-url="/report/uploadBatch.json" multiple
                                           data-form-data='{"nameType":"uploadBatch","position":"car_img_batch"}'>

2、JS代码（批量上传要点 singleFileUploads: false）

// 批量上传
    $('#fileuploadBatch').fileupload({
        dataType: 'json',
        singleFileUploads: false,  // false表示支持批量上传
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        done: function (e, data) {
            
        },
        progressall: function (e, data) {
        }
    });

3、后台代码

@RequestMapping(value = { "/report/uploadBatch" }, method = { RequestMethod.POST })
	@ResponseBody
	public Map<String,Object> uploadBatch(MultipartHttpServletRequest request) {
		List<MultipartFile> files = request.getFiles("uploadBatch[]");
		// js上传图片传的参数（可用于后台逻辑判断）
		String nameType = request.getParameter("nameType");
		String position = request.getParameter("position");
		Map<String,Object> map = new HashMap<>();
		try {
			// 如果是批量上传
			for (MultipartFile mpf : files) {
				InputStream in = new ByteArrayInputStream(mpf.getBytes());
				// 获取文件全称
				String name = mpf.getOriginalFilename();
				logger.info(name+", "+mpf.getContentType()+", "+mpf.getSize());
				// 获取文件类型
				String imgType = name.substring(name.lastIndexOf(".") + 1);
				// 获取文件名称
				String imgName = name.substring(0, name.lastIndexOf("."));
				// 图片保存服务器(调用保持到服务器的接口)
				String savePath = "";
				// 用于前台展示图片
				map.put("img_"+imgName,savePath);
			}
			return map;
		} catch (Exception e) {
			e.printStackTrace();
			throw new BusinessException("上传文件失败");
		}
	}

搞定，发布一波！

发布到测试环境之后发现上传图片总大小超过10M会直接报413，因为Nginx设置了上传大小最大为10M

优化一波：

1.1. HTML代码（multiple="multiple"可以选择多张图片，去掉则只能单张图片选中）

<input id="fileuploadBatch1" type="file" name="uploadBatch" multiple="multiple"
                                           onchange="xmTanUploadImg(this)">

2.1 JS代码

//选择图片，马上预览
    function xmTanUploadImg(obj) {
        var fl=obj.files.length;
		var flag = false;
        for(var i=0;i<fl;i++){
            var file=obj.files[i];
            // 表单对象，用于将文件传到后台
            var formData = new FormData();
            formData.append('imgFile', file);
            $.ajax({
                url : "/report/uploadInBatches.json",
                type : "post",
                dataType: 'json',
                cache: false,
                data:formData,
                processData: false,
                contentType: false,
                success: function(result) {

                }
            });
        }
    }

属性说明：

processData：默认情况下，processData 的值是 true，其代表以对象的形式上传的数据都会被转换为字符串的形式上传。而当上传文件的时候，则不需要把其转换为字符串，因此要改成false

contentType：默认值为contentType = "application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。

contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。

3.1 后台代码

/**
	 * 批量图片上传优化，一张一张上传
	 * @param request
	 */
	@RequestMapping(value = { "/report/uploadInBatches" }, method = { org.springframework.web.bind.annotation.RequestMethod.POST })
	@ResponseBody
	public Map<String,Object> uploadInBatches(MultipartHttpServletRequest request) {
		Map<String,Object> urlMap = new HashMap<>();
		InputStream in = null;
		try {
			// 获取文件
			MultipartFile file = request.getFile("imgFile");
			// 获取文件全称
			String originalFilename = file.getOriginalFilename();
			logger.info("批量上传uploadInBatches接口调用，图片名称："+originalFilename+", "+file.getContentType()+", "+file.getSize());
			// 获取文件类型
			String imgType = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
			long startTime = System.currentTimeMillis();
			// 图片保存服务器
			in = new ByteArrayInputStream(file.getBytes());
			String savePath = XXXService.storageMedia(in, imgType);// 这里写你上次接口
			logger.info(originalFilename+" 图片上传成功：  "+", "+file.getContentType()+", "+file.getSize()+", "+
					savePath+"=====上传图片耗时："+(System.currentTimeMillis()-startTime));
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			try {
				in.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}

		return urlMap;
	}

也是批量上传，只不过是循环传到后台保存。