文件上传,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 相关文章推荐
js操作textarea 常用方法总结
Dec 03 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
生成php程序的php代码
2008/04/07 PHP
php 设计模式之 单例模式
2008/12/19 PHP
php array_intersect()函数使用代码
2009/01/14 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
vue中实现滚动加载更多的示例
2017/11/08 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
详解Python的单元测试
2015/04/28 Python
windows下ipython的安装与使用详解
2016/10/20 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
整改通知书
2015/04/20 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书