文件上传,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 相关文章推荐
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
javascript屏蔽右键代码
May 15 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
express.js中间件说明详解
Mar 19 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 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数组使用规则分析
2015/02/27 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
获奖的大学生创业计划书
2014/01/05 职场文书
参观考察邀请函范文
2014/01/29 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
优秀护士先进事迹
2014/05/08 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
英文慰问信范文
2015/03/24 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android