zoukankan      html  css  js  c++  java
  • 利用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方式跨域

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

  • 相关阅读:
    【题解】 保镖 半平面交
    【题解】 CF1492E Almost Fault-Tolerant Database 暴力+复杂度分析
    【题解】 闷声刷大题 带悔贪心+wqs二分
    【题解】 「WC2021」表达式求值 按位+表达式树+树形dp LOJ3463
    EasyNVR及EasyRTC平台使用Go语言项目管理GoVendor和gomod的使用总结
    一天一个开发技巧:如何基于WebRTC建立P2P通信?
    HTML5如何实现直播推流?值得学习一下!
    java后端学习-第一部分java基础:Scanner的基本使用
    java后端学习-第一部分java基础:三元运算符、运算符优先级、标识符、关键字和保留字
    java后端学习-第一部分java基础:赋值运算符
  • 原文地址:https://www.cnblogs.com/shanligang/p/5789459.html
Copyright © 2011-2022 走看看