使用AJAX异步提交图片表单

前言

个人博客在进行后台上传图片时候出现了跨域问题，具体如下：

Load denied by X-Frame-Options: http://localhost:8080 does not permit cross-origin framing
Refused to display in a frame because it set 'X-Frame-Options' to origin

从代码中我们看出提示的错误是说我们获取iframe时候跨域了，但是我并不是这样的情况，我个人的情况是iframe是通过js动态生成的，就处于当前页面中。我个人也探索了很久一直没有得到好的解决方案，后来和同学的交流中觉得使用ajax表单上传图片更安全一点。

如果某些朋友确实是跨域的问题，请参考这篇文章http://blog.csdn.net/fdipzone/article/details/17619673

ajax上传图片

ajax本来是不支持的文件的提交的我们使用ajax提交需要借助jquery的插件，

下载地址ajaxform插件

案例演示

1.引入jquery.js和jquery.from.js

2.from表单

<form id="myForm" action="/image/upload" method="post" enctype="multipart/form-data">
url: <input type="text" name="name" />
<input type="submit" value="上传图片" />
</form>

3.js代码

//上传图片触发事件
dialog.find("[type=\"submit\"]").bind("click", submitHandler).trigger("click");
//成功callback
var options = {
success: showResponse,  // post-submit callback
timeout: 5000
};
var submitHandler = function() {
$("form").ajaxForm(options);
});
// post-submit callback
//responseText后端响应的数据
function showResponse(responseText, statusText, xhr, $form)  {
if (responseText.success === 1)
{
dialog.find("[data-url]").val(responseText.url);
}
else
{
alert(responseText.message);
}
}
return false;
});

结语

本文只是针对个人角度描述一下解决跨域问题的方法，并不保证针对每个人的不同的情况都起作用。本文的例子只是举例，运行还需要额外的条件，大致思路是这样子。

如果本文有什么纰漏的地方欢迎留言指正，本人前端的水平有限。

与君共勉！！！

最后说几句

个人博客已经开源，采用spring boot+thymeleaf模板。代码已经托管在github项目源码

欢迎各位朋友去fork and star，同时我也鼓励大家进行二次开发，也可以加入我，和我一起维护这个项目。