异步请求之同域名异步文件上传iframe标签

最新推荐文章于 2020-04-11 14:22:08 发布

置顶起个名字真难啊啊啊啊啊

最新推荐文章于 2020-04-11 14:22:08 发布

阅读量1.1k

点赞数 3

分类专栏： javascript 异步 iframe 文章标签： iframe javascript file callback upload html

本文链接：https://blog.csdn.net/li277680701/article/details/7283468

版权

javascript 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

异步

4 篇文章 0 订阅

订阅专栏

iframe

2 篇文章 0 订阅

订阅专栏

文章接上篇

异步请求之同域名异步请求 ajax

异步请求之非同域名简单异步请求script标签

异步上传文件一直是大家经常讨论和新手经常问到的问题

下面还是先来一个例子来说明问题好了

upload.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	var callbackfun = function(url){
		var body = document.getElementsByTagName("body").item(0);
		var img = document.createElement ("img");     
		img.src = url;     
		body.appendChild (img);
	}
  //-->
  </SCRIPT>
 </HEAD>
 <BODY>
<form action="test.php?callback=parent.callbackfun" method="post" enctype="multipart/form-data" target="upload">
<input type="file" name="file" id="file" /> 
<input type="submit" name="submit" value="Submit" />
</form>
<iframe name="upload" style="display:none"></iframe>
 </BODY>
</HTML>

test.php

<SCRIPT LANGUAGE="JavaScript">
<!--
<?php
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]);
echo $_GET['callback']."('upload/" . $_FILES["file"]["name"]."')";
 
?>
//-->
</SCRIPT>

此处其实主要的代码就是标红那里

form表单的target属性可以指向一个iframe来使表单的数据提交到那个iframe里面

那个iframe隐藏起来

然后在提交的页面里面输出js来调用原来页面的javascript 将路径返回回去

实现回调函数

基本上原理就是这样看到代码基本没有太多困难的地方

基本上就是在iframe里面用js调用父窗口的方法有一点点需要转变的地方

当然这里其实可以用其他方法来实现不过大同小异基本上全部都是讲form的target指向一个iframe

起个名字真难啊啊啊啊啊

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
异步请求之同域名异步文件上传iframe标签

文章接上篇异步请求之同域名异步请求 ajax异步请求之非同域名简单异步请求script标签异步上传文件一直是大家经常讨论和新手经常问到的问题下面还是先来一个例子来说明问题好了upload.php New Document <!-- var callbackfun = function(url){ var body = documen
复制链接

扫一扫