文件上传,iframe跨域数据提交的实现


Posted in Javascript onNovember 18, 2016

1、文件上传,图片上传,第三方uploadify插件,http://www.uploadify.com/about/

2、用iframe上传文件,提交表单,主要思路就是:

 a、js创建form表单,iframe,添加到body里,form的target要和iframe的name一致。

 b、form表单里更新数据,submit提交

 c、如果上传文件,图片,form里面添加 input-file 元素,绑定onchange事件,js触发,在onchange里面添加submit事件

 d、关于回调:iframe提交成功后,返回的数据在iframe子页面的里面,可以这样获取,需要拆分:

$iframe[0].contentWindow.document.querySelector('body').innerHTML

代码片:

 

var target = 'frameFile';
var input = '<input type="file" name="file" onchange="changeImage()">' +
  '<input name="appId" value="'+id+'">' +
  '<input type="submit" name="submit" value="submit">';
var $form = $('<form action="'+ url +'" target="'+ target +'" enctype="multipart/form-data" method="post" id="upImageForm" style="display:none">'+input+'</form>').appendTo('body');
var $iframe = $('<iframe name="'+ target +'" style="display:none"></iframe>').appendTo('body');
$form.find('input').eq(0).click();
window.changeImage = function(){
  $form.find('input').eq(-1).click();
};

//检测iframe页面load
$iframe.load(function(e){
  var str = $iframe[0].contentWindow.document.querySelector('body').innerHTML;
  var data = spt(str);
  $form.remove();
  $iframe.remove();
  callback(data);
});
function spt(str){
  //字符串拆成对象
  var a = str.indexOf('{');
  var b = str.indexOf('}');
  var j = {};
  var t = [];
  var s = str.substring(a+1,b);
  s = s.replace(/"/gi,'');
  t = s.split(',');
  for(var i=0; i<t.length; i++ ){
    var tmp = t[i].split(':');
    j[tmp[0]] = tmp[1];
  };
  return j;
};

 2-c修正,以上代码有bug:

手动触发input-file的onchange事件,在事件里面submit,这做法有问题。因为触发onchange事件,选择才开始,submit就已经提交了。

上传功能,form表单元素只能放到html里。

以上这篇文件上传,iframe跨域数据提交的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
JavaScript执行机制详细介绍
Dec 06 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 #Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 #Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 #Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 #Javascript
form+iframe解决跨域上传文件的方法
Nov 18 #Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 #Javascript
微信小程序开发实战教程之手势解锁
Nov 18 #Javascript
You might like
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
简单学习Python time模块
2016/04/29 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
西班牙在线药店:DosFarma
2020/03/28 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
易程科技软件测试笔试
2013/03/24 面试题
路政管理专业个人自荐信范文
2013/11/30 职场文书
工作分析计划书
2014/04/30 职场文书
婚礼父母答谢词
2015/01/04 职场文书
安全教育片观后感
2015/06/17 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
学校就业保障协议书
2019/06/24 职场文书
vue实现登陆页面开发实践
2022/05/30 Vue.js