SSM + AJAX + FormData上传文件

最新推荐文章于 2020-09-26 02:55:01 发布

NOV_JAM

最新推荐文章于 2020-09-26 02:55:01 发布

阅读量476

点赞数 1

分类专栏： java Ajax

本文链接：https://blog.csdn.net/novjam/article/details/101951211

版权

java 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

不废话，直接上代码

<table id="tb_bookdetail"  border="1px" cellspacing="0px" cellpadding="0px">
<form action="${pageContext.request.contextPath}/addBook" enctype="multipart/form-data" method="post" id="bookform">
	<tr>
		<td id="td1"><span id="k_bookname">书名:</span></td>
		<td id="td2"><span id="v_bookname"><input type="text" id="bookname" name="bookname"></span></td>
		<td id="td3"><span id="k_ISBN">ISBN:</span></td>
		<td id="td4"><span id="v_ISBN"><input type="text" name="ISBN"></span></td>
	</tr>
	<tr>
		<td><span id="k_bookauthor">作者:</span></td>
		<td><span id="v_bookauthor"><input type="text" name="author"></span></td>
		<td><span id="k_pic">封面:</span></td>
		<td>
			<span id="v_pic"><img id="book_pic" width="60px" height="60pxs" src="${pageContext.request.contextPath}/img/search.png"></span>
			<input type="file" id="multipartFile" name="multipartFile"/>
		</td>
	</tr>
	<tr>
		<td><span id="k_ishot">是否热门:</span></td>
		<td><span id="v_ishot"><input type="checkbox" name="ishot"></span></td>
		<td><span id="k_introduce">简介:</span></td>
		<td colspan="2"><span id="v_introduce"><textarea id="introduce" name="introduce"></textarea></span></td>
	</tr>
</form>
<tr>
    <td colspan="2"><input type="reset" id="reset" name="reset"/></td>
    <td colspan="2"><button id="btn_submit" name="btn_submit">提交</button></td>
</tr>
</table>

 @RequestMapping("/addBook")
    @ResponseBody
    public Book addBook(BookCustom bookCustom) throws Exception {
        System.out.println(bookCustom);
        String originalFilename = bookCustom.getMultipartFile().getOriginalFilename();
        String filename = UUID.randomUUID()+originalFilename.substring(originalFilename.lastIndexOf("."));
        String fpath = path + filename;
        BookQueryVo bookQueryVo = new BookQueryVo();
        bookCustom.setPic(filename);
        bookQueryVo.setBookCustom(bookCustom);
        bookService.insertBook(bookQueryVo);
        File file = new File(fpath);
        bookCustom.getMultipartFile().transferTo(file);
        Book book = new Book();
        BeanUtils.copyProperties(bookCustom,book);
        return book;
    }

<script>
    $(function () {
        var form = document.getElementById("bookform");
        $("#btn_submit").click(function () {
            var formData = new FormData(form);
            $.ajax({
                url:"${pageContext.request.contextPath}/addBook",
                type:"post",
                dataType:"json",
                data:formData,
                cache:false,
                processData:false,
                contentType:false,
                success:function (data) {
                    alert("success");
                },
                error:function(data){
                    alert("网络连接错误");
                }
            });
        });
    });
</script>

注意一点就是$(#btn_submit)只是单纯的button元素（没有在表单内！），如果放在表单内或者直接使用submit类型则回自动提交表单，收到json数据后跳转页面，直接显示json数据，达不到刷新页面数据的效果。