由于ajax无法发送带有文件的post请求。因此为了打到ajax效果,需要借助iframe。
原文地址
form表单中action正常填写处理文件上传的操作。target填写一个隐藏的iframe。
这样表单提交之后,文件会被上传,但是页面却不会刷新,因为表单提交后被刷新页面为隐藏的iframe,因此用户看到的效果和ajax处理的效果是一样的。
现在看到的效果是和ajax一样了,但是ajax是有返回值的。但是现在我们值刷新了iframe页面,却没有ajax的返回值,不知道操作到底是成功了还是失败了。因此需要在页面中写一个js的callback方法,然后在处理上传操作成功后来调用这个callback方法。
这个例子是php做的文件处理,其他语言同理。
echo "<script>parent.callback('图片上传失败',false)</script>";
这句花,调用了iframe的父页面的callback方法。并且将一些信息作为参数传进了callback方法。
这里是页面的callback方法,接受了上传图片处理后返回的结果。
这样,就用iframe模拟了ajax来上传文件。
原文地址
- <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来上传文件。