通过Iframe实现Ajax文件上传

2024年2月9日 177次阅读 来源: 小朋友

很早就知道可以通过Iframe来实现，今天实际造了一个玩，记录如下。

首先在表单前面添加一个iframe，然后将form的target指向iframe

<iframe id="dog" name="dog" src="" style="display:none;"></iframe>
<form id="cat" action="/bark" method="post" enctype="multipart/form-data" target="dog">
    <input type="file" name="hotdog"/>
    <input type="submit" id="btnSubmit" style="visibility: hidden"/>
</form>

Controller中的处理，将原始的HttpServletRequest转换成MultipartHttpServletRequest，就可以通过下面的方式拿到文件

//这里可以判断一下request的contentType是否为multipart/form-data
MultipartHttpServletRequest req = (MultipartHttpServletRequest)request;
MultipartFile file = req.getFile("hotdog");

窝需要在一个函数中控制form的提交，最初想到的是

$('#cat').submit()

在控制台中测试通过，最后在Jquery Dialog中调用

... ...
buttons:[{
    text : "确定",
    click : function() {
        #('#cat').submit() 我不要变成注释啊 (⊙０⊙)
    }
}]
    原文作者：小朋友
    原文地址: https://segmentfault.com/a/1190000000588397
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞