SSM 上传多个文件也可以上传多张图片

SSM 可上传多个文件使用form表单的异步提交，可做参考哟

 html 代码块：

<form class="layui-form" id="formreset" enctype="multipart/form-data">
	<div class="layui-form-item">
		<button type="button" id="updateDrug" class="layui-btn"
			onclick="addFile()">多文件上传</button>
		<button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
		<div class="layui-form-item">
			<input type="file" id="attachment" class="hidden"
				onchange="upAttachment()" hidden />
			<div id="container" class="container"
				style="padding-top: 5px;width:84%;display:none;margin-left:55px;">
				<table>
					<thead>
						<tr>
							<th style="width:10%;">序号</th>
							<th style="width:30%;">文件名</th>
							<th style="width:30%;">图片</th>
							<th style="width:10%;">大小</th>
							<th style="width:10%;">类型</th>
							<th style="width:10%;">移除</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>
		</div>
	</div>
</form>

 

JS代码

function addFile() {
    $('#container').show();
    var html = '<tr>';
    html += '<td><input type="file" name="pictures" id="idpictures" style="display:none;" onchange="processFiles(this,this.files)">' + ($('#container tbody tr').length + 1) + '</td>';
    html += '<td></td>';
    html += '<td><img src="" style="width: 150px;margin: 0px auto;display: block;" class="tdImg" /></td>';
    html += '<td></td>';
    html += '<td></td>';
    html += '<td><input type="button" value="移除" onclick="delFile(this)" class="layui-btn layui-btn-danger"></td>';
    html += '</tr>';

   $('#container table tbody').append(html);
   $('#container table tbody tr:last-child td:first-child>input').click();
    
}

// 选择文件
function processFiles(t, files) {
    if (files == null || files.length <= 0) {
        delFile(t); // 移除
    }

    var file = files[0];
    var name = file.name; // 名称
    var img = file.webkitRelativePath;//路径
    var size = change(file.size); // 大小
    var type = file.type; // 类型
    var arr = $(t).parent('td').parent('tr').find('td');

    if (arr.length >= 1) $(arr[1]).html(name);
    if (arr.length >= 2) {
        $(arr[2]).find('img').attr('src', window.URL.createObjectURL(file));//显示图片在表格里
    }
    if (arr.length >= 3) $(arr[3]).html(size);
    if (arr.length >= 4) $(arr[4]).html(type);
}

//移除不需要的图片
function delFile(t) {
    $(t).parent('td').parent('tr').remove();
}

// js中字节B转化成KB，MB，GB
function change(limit) {
    var size = "";
    if (limit < 0.1 * 1024) { // 小于0.1KB，则转化成B
        size = limit.toFixed(2) + "B"
    } else if (limit < 0.1 * 1024 * 1024) { // 小于0.1MB，则转化成KB
        size = (limit / 1024).toFixed(2) + "KB"
    } else if (limit < 0.1 * 1024 * 1024 * 1024) { // 小于0.1GB，则转化成MB
        size = (limit / (1024 * 1024)).toFixed(2) + "MB"
    } else { // 其他转化成GB
        size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
    }

    var sizeStr = size + ""; // 转成字符串
    var index = sizeStr.indexOf("."); // 获取小数点处的索引
    var dou = sizeStr.substr(index + 1, 2) // 获取小数点后两位的值
    if (dou == "00") { // 判断后两位是否为00，如果是则删除00
        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
    }
    return size;
}

 

ajaxSubmit()提交表单,使用第三方插件jquery.form实现；

         // 显示加载页面
            var loadIndex = layer.load(0, {
                shade: 0.3
            }); // 0代表加载的风格，支持0-2
         //整个表单提交
            $("#formreset").ajaxSubmit({
                type: 'POST',
                // 可选get
                url: ctx + "/drug/insertdrug.do",
                // 这里是接收数据的PHP程序
                data: {
                    type: type
                },        
                // 传给PHP的数据，多个参数用&连接
                dataType: 'json',
                // 服务器返回的数据类型 可选XML ,Json jsonp script html text等
                scriptCharset: 'UTF-8',
                success: function(data, textStatus) {
                    layer.close(loadIndex);
                    if (data.state == 'ok') {
                        layer.msg(data.msg);
                        selectData(); // 刷新查询
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.close(loadIndex);
                    layer.msg('保存失败:' + errorThrown);
                }
            });

后台代码：

/**
	 * 新增
	 * 
	 * @param type  
	 * @param data   表单提交过来保存其他的字段
	 * @param file  上传文件获取的数据
	 * @param request
	 * @return
	 */
        //pictures 要跟name值对应
	@RequestMapping(value = "/insertdrug", produces = { "application/json;charset=UTF-8" })
	@ResponseBody
	public String insert(String type,Drugdata data,
			@RequestParam(value = "pictures", required = false) MultipartFile[] file,
			HttpServletRequest request) {
		JSONObject json = new JSONObject();
		json.put("msg", "");
		json.put("state", "no");
		String msg = "";
		String state = "no";
		boolean isdelete = false;
		data.setIsdelete(isdelete);
		try {
			String ss = "";
			String path = "";
			for (MultipartFile mf : file) {
				System.out.println(file.length);
				if (!mf.isEmpty()) {
			    // 使用UUID给图片重命名，并去掉四个“-”
				String name = UUID.randomUUID().toString()
								.replaceAll("-", "");
				// 获取文件的扩展名
				String ext = FilenameUtils.getExtension(mf
								.getOriginalFilename());
				// 设置图片上传路径
				String url = request.getSession().getServletContext()
								.getRealPath("/upload");
				System.out.println(url);
						// 以绝对路径保存重名命后的图片
				mf.transferTo(new File(url + "/" + name + "." + ext));
						// 把图片存储路径保存到数据库
				path = "upload/" + name + "." + ext;
				  }
					ss = ss + path + ","; 	//我这里是一个字段保存多张图片，所以要拼接起来 ','分隔符
					System.out.println(ss);
				}
			
				ss = ss.substring(0, ss.length() - 1);// 截取后面多余的一个分隔符
				data.setPicture(ss);
				int intR = drugdataService.insert(data);
				if (intR > 0) {
					state = "ok";
					msg = "新增成功";
				} else {
					state = "no";
					msg = "新增失败";
				}
			
		} catch (Exception e) {
			msg = e.getMessage();
		}
		json.put("msg", msg);
		json.put("state", state);
		return json.toString();
	}

就这样就可以上传成功了^.^，不会的可以参考一下