利用iframe+from表单实现跨域上传文件

一、需要的材料

客户端需要一个HTML页面A其中包含一个iframe和一个form表单,一个页面B(我称之为客户端代理)里面包含对返回参数的处理;

服务端需要一个asp.net的一般处理程序用来处理上传文件并返回值。

二、原理图

有图才有真相,哈哈哈

三、客户端代码实现

1、页面A的实现

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>A页面</title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>

	<body>
		<iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>
		<form id="fileform" method="post" enctype="multipart/form-data" target="hidden_frame">
			<input type="file" name="fileUpload" />
		</form>
		<button id="submitbtn">开始上传</button>
		<script type="text/javascript">
			function callback(msg) {
				//回调函数
				alert(msg);
			}
		</script>
		<script type="text/javascript">
			$("#submitbtn").click(function() {
				var callbackurl = window.location.href.substring(0, window.location.href.lastIndexOf('/')) + "proxy.html"; //获取代理文件路径
				$("#fileform").attr("action", "FileHandler.ashx?callbackurl=" + callbackurl);
				$("#fileform").submit();
			})
		</script>
	</body>

</html>

2.代理页面实现 proxy.html 为了方便调用,我将该页面放在了与A页面同一目录下,也可以不同目录,但必须是同域

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>代理文件</title>
	</head>
	<body>
		<script type="text/javascript">
			var rs = window.location.search.split('?').slice(1);
			window.parent.callback(rs.toString().split('=').slice(1));//调用父页面的方法
		</script>
	</body>
</html>

三、服务端实现

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/html";
    HttpServerUtility server = context.Server;
    HttpRequest request = context.Request;
    HttpResponse response = context.Response;
    string callbackurl = context.Request["callbackurl"];
    HttpPostedFile file = context.Request.Files[0];
    if (file.ContentLength > 0)
    {
        string extName = Path.GetExtension(file.FileName);
        string fileName = Guid.NewGuid().ToString();
        string fullName = fileName + extName;
 
        string imageFilter = ".jpg|.png|.gif|.ico";// 随便模拟几个图片类型
        if (imageFilter.Contains(extName.ToLower()))
        {
            string phyFilePath = server.MapPath("~/Upload/Image/") + fullName;
            file.SaveAs(phyFilePath);
            context.Response.Redirect(callbackurl + "?msg='上传成功'")
        }
    }
}

四、该方法的优缺点以及适用范围

优点:没有兼容性问题,在常见的浏览器中都是适用的;

缺点:返回数据最大支持2KB,对于较大的数据范围建议使用CORS方式跨域

适用范围:上传文件,返回值只是一些短信息比如返回上传正确与否。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

MVC5 网站开发之九 网站设置

网站配置一般用来保存网站的一些设置,写在配置文件中比写在数据库中要合适一下,因为配置文件本身带有缓存,随网站启动读入缓存中,速度更快,而保存在数据库中要单独为一...

31250
来自专栏蘑菇先生的技术笔记

c#实现redis客户端(一)

32360
来自专栏林德熙的博客

win10 uwp smms图床 进行HttpClient post参数错误win10 uwp post 上传文件所有代码

本文,如何使用smms图床上传图片,用到win10 uwp post文件,因为我是渣渣,如果本文有错的,请和我说,在本文评论,或发给我邮箱,请不要发不良言论

17220
来自专栏跟着阿笨一起玩NET

ASP.NET用HttpListener实现文件断点续传

本文转载:http://www.cnblogs.com/TianFang/archive/2007/01/03/610739.html

15010
来自专栏LanceToBigData

HttpClient(二)HttpClient使用Ip代理与处理连接超时

前言   其实前面写的那一点点东西都是轻轻点水,其实HttpClient还有很多强大的功能:   (1)实现了所有 HTTP 的方法(GET,POST,PUT,...

48980
来自专栏技术小讲堂

ASP.NET AJAX(15)__构建高性能ASP.NET AJAX应用UpdatePanel的性能问题使用UpdatePanel的注意事项脚本加载避免脚本阻塞页面显示AjaxControlTool

UpdatePanel的性能问题 在UpdatePanle使用的时候,它每次的更新都是将整个页面回送的,而且也会加上一些他更新的标记,所以往往它传递的数据量比传...

338100
来自专栏菩提树下的杨过

img标签的src=""会引起的Page_Load多次执行

今天看见园子里有人因img的src为空导致session丢失,详情见http://www.cnblogs.com/kyneblog/archive/2009/0...

234100
来自专栏码农阿宇

EF Core利用Transaction对数据进行回滚保护

What? 首先,说一下什么是EF Core中的Transaction Transaction允许以原子方式处理多个数据库操作,如果事务已提交,则所有操作都应用...

39950
来自专栏晓晨的专栏

.NET Core 实现 Redis 批量查询指定格式的Key

Redis 作为当前最流行的内存型 NoSQL 数据库,被许多公司所使用,作为分布式缓存。我们在实际使用中一般都会为 key 带上指定的前缀或者其他定义的格式。...

11910
来自专栏石奈子的Java之路

原 荐 Java9之HttpClientAP

30220

扫码关注云+社区

领取腾讯云代金券