利用iframe实现图片跨域上传

最新推荐文章于 2022-08-02 10:37:35 发布
置顶 最新推荐文章于 2022-08-02 10:37:35 发布
阅读量1k 收藏
点赞数 1
分类专栏： js / jquery笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixiaogang1113/article/details/8725103
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> 跨域demo</title >
<script type="text/javascript" language= "javascript" src="../js/jquery-1.8.3.min.js" ></script>
</head>
<body>
<form id= "proxy_form" action ="http://wo.test.com/proxy.php" method="post" target="proxy_hidden_iframe_1">
       <input type="file" name="file" value="" />
       <input type="text" name="name" value="" />
       <input type="button" id="proxy_btn" value="提交" />
</form>
<iframe name="proxy_hidden_iframe_1" src="about:blank" style="display :none"></iframe >

<script type="text/javascript" >
$(document).ready(function (){
      $( "#proxy_btn").click(function (){
             /**
             * 自己编写判断数据的合法性
             */
            
            $( "#proxy_form").submit();
      });
});

/**
 * 跨域回调函数
 */
function _proxyCallBack(data){
       // firefox 输出结果
      console.log(data);
      
       // 再处理前台界面问题
}
</script>
</body>
</html>



<?php
/**
 * 逻辑层， 域名：wo.test.com
 */
$file = $_FILES['file'];
$name = trim($_POST['name']);

// 开始处理逻辑
//$result = array("status"=>
最低0.47元/天 解锁文章
长沙-小刚
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
跨域post上传图片
12-08
基于无刷新上传图片技术，使用最普通的html页面技术，支持ie6+浏览器
iframe跨域上传图片
03-01 102
方案一：用jquery的$.post异步提交，然后把返回来的值用jquery填充到隐藏域中。可是$.post不支持跨域。jQuery.ajax()支持get方式的跨域，这其实是采用jsonp的方式来完成的。 方案二：利用iframe以及jquery进行表单post提交。代码如下： == a.com/post.html == <script> function pos...
跨域上传图片的尝试过程，最终成功了。哈哈
a1639901的博客
04-15 329
关于这个跨域上传图片的问题，其实去年底的时候就该去实现的，因为老板朝三暮四，一会儿让做这个，一会儿看那个，就耽误了。因为这个过程花费了我整整一天的时间，我认为有必要记录下来。 首先，项目是一个ERP，针对的是公司的一个小型电商的网站。项目经理让我搭建一个图片服务器，当时也是为了完（尝）成（尝）任（新）务（鲜），用的都是当时从没接触过的。通过百度就选择了Nginx + Node...
【html】用iframe在服务器环境下跨域单张图片或者视频
KatyLight的博客
08-02 636
【html】用iframe在服务器环境下跨域单张图片或者视频
h5跨域访问图片_html5上传图片(一)一跨域上传
weixin_35815766的博客
01-14 233
public override voidProcessRequest(HttpContext context){//获取目标站点地址String target = "图片服务器地址";string sid = context.Request["sid"];target= string.Format("{0}?city=&channel=频道&sid={1}&backurl=...
文件上传,iframe跨域数据提交的实现
09-01
本文将详细探讨如何利用iframe来实现这一目标。 首先，我们要理解什么是iframe。IFrame（Inline Frame）是HTML的一种元素，它允许我们在一个网页中嵌入另一个网页，这对于实现某些特定功能，如无刷新加载内容、跨域...
form+iframe解决跨域上传文件的方法
09-01
总的来说，`form+iframe`解决跨域上传文件是一种传统而实用的技巧，尤其适用于不支持AJAX或CORS的老版本浏览器。但随着技术的发展，现代浏览器提供的CORS、Fetch API等机制已经成为更安全、更灵活的选择，建议在条件...
iframe实现Ajax文件上传效果示例
10-26
然而，这种方法在某些情况下（比如跨域上传、处理复杂的表单数据）仍然是一个可行的选择，尤其是在老版本浏览器中，因为XMLHttpRequest在某些场景下可能存在兼容性问题。 总结一下，iframe实现的Ajax文件上传主要是...
ajax图片上传java_Java使用Ajax实现跨域上传图片功能
weixin_32541333的博客
02-12 115
说明 ：图片服务器是用Nginx搭建的，用的是PHP语言这个功能 需要 用到两个js文件：jquery.js和jQuery.form.jsfunction submitImgSize1Upload() {var postData = function( form , callback){var form = document.getElementById("upload-form");//获取表单...
跨域的图片上传
蒋蒋
08-05 529
跨域的图片上传 if( "OPTIONS".equals(httpServletRequest.getMethod())){ System.out.println("图片上传"); httpServletResponse.setStatus(HttpServletResponse.SC_NO_CONTENT); }else{ ...
Java使用Ajax实现跨域上传图片功能
08-29
主要介绍了Java使用Ajax实现跨域上传图片功能,需要的朋友可以参考下
jQuery File Upload 可跨域的多图片上传
01-30
找到这个资源到解决，走了很多弯路，从官网下下来之后发现也有问题，经过调整终于可以正常运行了。这个js框架支持跨域上传，的确支持跨域。
Ueditor 跨域图片上传
zhuyu19911016520
10-26 1928
ueditor 文档官方地址：http://fex.baidu.com/ueditor/ 我在项目中使用Java，所以用ueditor的后台配置为 JSP 如何自定义请求地址，官方文档也有说明， 要跨域上传图片需要明白个东西，例如 localhost:8080是ueditor页面 localhost:2000是图片上传服务 在localhost:8080项目下的 ueditor.all.js ...
跨域上传图片Demo及分析
米鲸灵
08-31 622
技术选型：nginx中配置跨域支持功能 配置代码： 在nginx.conf中配置 http { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,
java 跨域上传_java实现后台图片跨域上传功能
weixin_33249090的博客
02-15 390
跨域的原因在项目开发的过程中，我们经常需要用到图片上传操作，传统的做法是我们将其上传到项目的所在目录中，比如说项目的target目录中，但是由于项目在重启的过程中，target文件夹下的内容会被全部清空，这意味着如果采用这种方式，那么在测试环境与开发环境；在每一次的项目重启的过程中，我们经常会遭遇图片丢失的情况，这种情况有时往往很让人头疼，因而有一个图片服务器对于项目的开发和测试而言，这是十分必要...
ueditor 上传图片java_真正解决百度编辑器UEditor上传图片跨域问题
weixin_35483528的博客
02-21 400
做前后端分离的项目用到UEditor，把上传图片程序拿出来放到了接口程序中，上传图片接口已经做了跨域处理，按理说编辑器中上传图片应该不会有问题。可是配置好图片上传路径后，运行，打开调试，测试一下，报错了：找到上传图片的代码，发现引用的是webuploader.js，先修改下，直接引用webuploader.js。经过调试找到，实际上传图片走的就是这里了，webuploader.js文件。起初在网上...
java用ajax实现跨域上传图片
qq_29707343的博客
09-01 1928
说明 ： 图片服务器是用Nginx搭建的，用的是Php语言 这个功能 需要 用到两个js文件： jquery.js和jquery.form.js                                                           function submitImgSize1Upload() { var
图片上传的跨域问题的几种解决方案和细节及优缺点
热门推荐
梦骑士的博客
03-06 1万+
方案一 传到前端服务器本地,然后用服务器跨域 ajaxSubmit方式,需要jquery.form.min.js插件 $("#imgUploadForm").ajaxSubmit({ type: "POST",//提交类型 dataType: "json",//返回结果格式 url: '/php/temporary/Controller/aotuTailorUplo
关于script,img,iframe等由js脚本发起的跨域
dinglingjie的专栏
11-09 711
如果当前页面时http,若发起的请求时https
解决iframe src 跨域具体怎么实现呢
最新发布
06-01
解决 iframe src 跨域问题，可以使用 postMessage API 实现跨文档通信。具体步骤如下： 1. 在 iframe 内部编写 JavaScript 代码，并定义一个消息发送函数，例如： ``` function sendMessage(msg) { // 向父窗口发送消息 window.parent.postMessage(msg, '*'); } ``` 2. 在父窗口中监听 message 事件，例如： ``` window.addEventListener('message', function(event) { // 接收来自 iframe 的消息 var msg = event.data; // 处理消息 // ... }); ``` 3. 在 iframe 内部调用 sendMessage 函数发送消息，例如： ``` sendMessage('Hello, parent window!'); ``` 4. 在父窗口中处理消息，例如： ``` window.addEventListener('message', function(event) { // 判断消息来源是否是指定的 iframe if (event.source !== iframe.contentWindow) { return; } // 接收来自 iframe 的消息 var msg = event.data; // 处理消息 // ... }); ``` 通过 postMessage API 实现跨文档通信，可以避免 iframe src 跨域问题，并且可以在不同域名的页面之间进行通信。需要注意的是，在发送消息时，需要指定接收消息的窗口，可以使用通配符 "*" 来指定所有窗口都可以接收消息，但这样会存在安全风险，建议尽可能地指定接收消息的窗口。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值