jsp:
<form action="inImg.do" method="post" enctype="multipart/form-data" target="nm_iframe">
<table>
<tr>
<td width="100" align="right">照片:</td>
<td> <input type="file" id="btn_file" name="theFile" multiple/></td>
</tr>
</table>
<input type="submit">
</form>
<iframe id="id_iframe" name="nm_iframe" style="display:none;"/>
controller:/**
* 保存前台选择的文件到数据库
*/
@RequestMapping("inImg.do")
public void inImg(HttpServletRequest request,@RequestParam(value = "theFile") MultipartFile[] files)
throws Exception{
for(MultipartFile file:files){
UserMsg userMsg = new UserMsg();
userMsg.setMessage("我在上传前台选择的图片到数据库");
userMsg.setPicture(file.getBytes());
userMsg.setUserName("fzq");
loginService.saveImg(userMsg);
}
}
要点1:在input标签中加入multiple属性,并在controller中用MultipartFile[]数组来接收,实现批量
要点2:加入一个隐藏的iframe,设置input标签的target属性,实现form表单提交不刷新不跳转页面
之后:
发现这样写,我点击其它input按钮时,总是报错,说这个onclick方法总是没有定义,原因暂时还没有找到
所以换了一种写法(controller可以不改):
<div> 用户名:<input type="text" id="userName"/><br> 密码:<input type="text" id="userPassword"><br> <input type="button" value="登录" onclick="fnCommit()"/> <input type="button" value="注册" onclick="TofnSaveUser()"/> <input type="button" value="保存本地图片" onclick="fnTest()"/> <input type="button" value="下载数据库图片" onclick="fnCC()"/> <img src="<%=request.getContextPath() %>/loginController/showImg.do"/> </div> <form action="inImg.do" method="post" enctype="multipart/form-data" id="registSubmit" > <input type="file" id="btn_file" name="theFile" multiple style="display:none"/> <input type="submit" style="display:none"> </form> <div> <input type="button" value="选择文件" onclick="fnChoseFile()"> <input type="button" value="上传" onclick="fnImPortData()"> </div>
<script src='<%=request.getContextPath() %>/js/jquery-form.js'></script>
function fnImPortData(){ var filecheck = document.getElementById("btn_file").value; if(filecheck){ var options = { url: "inImg.do", dataType:"text", type:"post", success:function(responseText){ } } $("#registSubmit").ajaxSubmit(options); } } function fnChoseFile() { document.getElementById("btn_file").click(); }