由于ajax无法发送带有文件的post请求。因此为了打到ajax效果,需要借助iframe。
<form id="formImg" action="uploadImg" method="post" target="hidden_frame" enctype="multipart/form-data">
<div class="fromtrs">
<label>[i]*[/i]活动海报:</label>
<input id="AidImg" class="sstp" type="file" name="AidImg" onchange="uploadImg()"/>
<div class="sjjt" style="display:none;" id="imgError">
<div class="bzsj_left"></div>活动海报不可为空</div>
</div>
</form>
<iframe style="display:none" name='hidden_frame' id="hidden_frame"></iframe>
<div class="fromtrs">
<img id="img" src="" width="80" height="80"/>
</div>
form表单中action正常填写处理文件上传的操作。target填写一个隐藏的iframe。
这样表单提交之后,文件会被上传,但是页面却不会刷新,因为表单提交后被刷新页面为隐藏的iframe,因此用户看到的效果和ajax处理的效果是一样的。
现在看到的效果是和ajax一样了,但是ajax是有返回值的。但是现在我们值刷新了iframe页面,却没有ajax的返回值,不知道操作到底是成功了还是失败了。因此需要在页面中写一个js的callback方法,然后在处理上传操作成功后来调用这个callback方法。
这个例子是php做的文件处理,其他语言同理。
public function uploadImg()
{
try{
if($_FILES["AidImg"]["size"]!=0)
{
$uploadPath = MB_ROOT_DIR . "/pic";
if ($_FILES["AidImg"]["size"] < 1024 * 1024 * 2) {
if ($_FILES["AidImg"]["error"] > 0) {
error($_FILES["AidImg"]["error"],"index.php/Campaign/campaignPublish");
} else {
$suffix = substr($_FILES["AidImg"]["name"], strrpos($_FILES["AidImg"]["name"], '.') + 1);
$imgDate=date("YmdHis");
$name = $imgDate . rand("1000", "9999") . "." . $suffix;
if (!is_dir($uploadPath)) {
mkdir($uploadPath);
}
if (move_uploaded_file($_FILES["AidImg"]["tmp_name"], $uploadPath . "/" . $name)) {
$pf = new IBPostFile(UPLOAD_IMAGE_URL,UPLOAD_IMAGE_PORT);
$pf->setFile("AidImg", $uploadPath . "/" . $name);
$pf->sendRequest();
$imgUrl = $pf->getResponse();
}
}
} else {
echo "<script>parent.callback('图片大小不能超过2M',false)</script>";
return;
}
}
}
catch(Exception $e)
{
echo "<script>parent.callback('图片上传失败',false)</script>";
return;
}
echo "<script>parent.callback('$imgUrl',true)</script>";
}
echo "<script>parent.callback('图片上传失败',false)</script>";
这句花,调用了iframe的父页面的callback方法。并且将一些信息作为参数传进了callback方法。
function uploadImg()
{
var names=$("#AidImg").val().split(".");
if(names[1]!="gif"&&names[1]!="GIF"&&names[1]!="jpg"&&names[1]!="JPG"&&names[1]!="png"&&names[1]!="PNG")
{
$("#imgError").html("<div class='bzsj_left'></div>"+"海报必须为gif,jpg,png格式");
$("#imgError").show();
return;
}
$("#formImg").submit();
}
function callback(message,success)
{
if(success==false)
{
$("#imgError").html("<div class='bzsj_left'></div>"+message);
$("#imgError").show();
}
else{
$("#imgError").hide();
var paths=message.split("/");
$("#img").attr("src",message);
$("input[name='imgUrl']").val(paths[paths.length-1]);
}
}
这里是页面的callback方法,接受了上传图片处理后返回的结果。
这样,就用iframe模拟了ajax来上传文件。
分享到:
相关推荐
ps:Ajax技术基本上可以说是由google公司带起来的,但少Gmail中上传文件用的还是 IFrame,所以说使用IFrame来上传文件是最好的选择。 我在这里这里用的技术是jsp,其实asp,php等也是一样可以这么实现的
ajax iframe jsp 无刷新上传文件+JavaScript字符串函数大全+如何自定义Struts2表单验证后的错误信息显示格式样式
通过Django的Form方式上传文件,简单,但无法局部刷新实现ajax效果; 通过js或jQuery方式,需要使用FormData对象,仍有些浏览器不兼容; 通过Form+iframe方式上传文件,兼容性最好。 里面含有全部源代码。
ps:Ajax技术基本上可以说是由google公司带起来的,但少Gmail中上传文件用的还是 IFrame,所以说使用IFrame来上传文件是最好的选择。 我在这里这里用的技术是jsp,其实asp,php等也是一样可以这么实现的
答案:可以使用iframe模拟Ajax上传文件。接下来博主将使用iframe来模拟Ajax来上传文件。 首先看一下效果图: 文件结构图: 09-iframe-upload.html文件: 页面中有一个表单,表单中有一个上传文件按钮和提交按钮,...
使用隐藏的Iframe实现ajax无刷新上传
异步的文件上传是在现代的AJAX实现的Web应用里面经常要遇到,必须解决的问题。但是标准的AJAX类(XmlHttpRequest)无法实现传输 文件的功能。因此,这里讨论的内容就是如何在AJAX的技术的基础之上构建异步的文件上传...
本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法。分享给大家供大家参考,具体如下: 使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 ...
同时,ajax并不支持文件的上传,此时ajaxfileupload就应运而生了,本人,在此基础上经过改写,使其同时支持,多文件上传isMore(boolen)、序列化类型参数ContentType(Serial/json)’,并且给出了SpringMVC的文件...
ajax iframe上传.rar
实例VS2010代码 dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar
JSP Ajax多文件批量上传程序,广泛适用于后台文件上传、网盘上传、用户资料上传等批量上传的JSp系统中。 参数设置: FileName: "filename",//文件上传控件的name,配合后台使用 FrameName: "",//iframe的...
目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子。 方法一,利用jquery ajaxfileupload.js实现文件上传 ...
第24周-第12章节-Python3.5-ajax操作-伪ajax(iframe).avi
下面给大家分享下基于ajax实现文件上传并显示进度条。在jsp部分,需要设计一个表单,form的属性添加 enctype=”multipart/form-data”,设计一个iframe,作为隐藏。form的target等于iframe的name; 在servlet部分:...
通过隐蔽iframe实现无刷新上传文件操作_.docx
iframe实现图片异步上传.dociframe实现图片异步上传.dociframe实现图片异步上传.dociframe实现图片异步上传.doc
AJAX无法实现文件上传功能,原因是JavaScript安全限制不能对文件执行操作,但是通过IFRAME框架可以模拟实现无刷新效果。虽说是无刷新的,但状态栏会刷新一下。代码是一个JSP的示例。
NULL 博文链接:https://wangchao1982.iteye.com/blog/623352