文件上传,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延迟执行实现方法(setTimeout)
Dec 30 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
巧用canvas
Jan 21 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
js实现简单点赞操作
Mar 17 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实现的连贯操作、链式操作实例
2014/07/08 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
jquery radio 操作代码
2011/03/16 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
Vue加载json文件的方法简单示例
2019/01/28 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
PyQt5组件读取参数的实例
2019/06/25 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
《再见了,亲人》教学反思
2014/02/26 职场文书
读群众路线的心得体会
2014/09/03 职场文书
先进个人事迹材料
2014/12/29 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
员工辞职信怎么写
2015/02/27 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang
世界十大狙击步枪排行榜
2022/03/20 杂记