Juery结合iframe实现无刷新上传图片的代码
发布时间：2015-10-21 编辑：jiaochengji.com
本文介绍下，Jquery与iframe相结合，实现无刷新上传图片的一例代码，有需要的朋友，参考下吧。
本例用jquery实现无刷新异步上传图片，结合iframe来上传图片，具体实现方法如下。
1、HTML中form表单相关代码
<form method="post" enctype="multipart/form-data" action="http://www.jbxue.com/upload" target="uploadiframe" style="display"none;">
<input type="file" id="file-input" name="file">
<input type="submit" id="file-submit">
<iframe name="uploadiframe"></iframe>
</form>
<input type="file" id="file-input" name="file">
<input type="submit" id="file-submit">
<iframe name="uploadiframe"></iframe>
</form>
解释：
在form表单中会有一个iframe，此处便是要在from中设置target等于iframe的name，使form表单提交到iframe中。
此时，可以在js中写入代码：
复制代码 代码示例:
$(".file-button").bind("click",function(){
$("#file-input").trigger("click");
});
$("#file-input").bind("change",function(){
$("#file-submit").trigger("click");
});
function onUploadSuccess(data){
//the function after upload
}
$("#file-input").trigger("click");
});
$("#file-input").bind("change",function(){
$("#file-submit").trigger("click");
});
function onUploadSuccess(data){
//the function after upload
}
这时，只需后端在上传接口的返回值中，调用parent的onUploadSuccess方法即可：
复制代码 代码示例:
<script type="text/javascript">
document.domain = "sample.com";
window.parent.onUploadSuccess({"code":0,"msg":"","data":{"width:,"height":,"url":""}});
</script>
document.domain = "sample.com";
window.parent.onUploadSuccess({"code":0,"msg":"","data":{"width:,"height":,"url":""}});
</script>
说明：在iframe中加入domain的设置是为了防止JS对于跨域的验证
您可能感兴趣的文章：
Juery结合iframe实现无刷新上传图片的代码
php iframe无刷新上传文件的实现代码
jquery刷新aspx中iframe的src的代码
php无刷新文件上传程序代码
iframe局部刷新的二种实现方法
php iframe实现无刷新上传文件例子
PHP类似AJAx上传图片简单实例
php 利用iframe实现无刷新文件上传功能
php 无刷新上传文件的代码
JQuery自适应IFrame高度（支持嵌套 兼容IE,ff,safafi,chrome）
[关闭]