form表单提交批量上传文件,不刷新不跳转页面

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();
}

猜你喜欢

转载自blog.csdn.net/blossomfzq/article/details/80737776