[二]烦透的动态file上传

最新推荐文章于 2025-12-13 11:33:05 发布
原创 最新推荐文章于 2025-12-13 11:33:05 发布 · 939 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#file #iframe #input #function #html #button

本文介绍了一种在Firefox浏览器中解决iframe内元素加载延迟的方法，通过使用setTimeout实现延迟创建DOM对象，确保了跨浏览器的一致性。

 

<html>
<head>
<script type="text/javascript">

    show_on = function(){
        var myinput = document.getElementById("myinput");
        
        var ifrm = document.createElement("iframe");
        ifrm.setAttribute("style","width:283px;height:230px;");
        ifrm.setAttribute("scrolling","no");
        ifrm.setAttribute("frameborder","1");
        myinput.appendChild(ifrm);
        ifrm = ifrm.contentWindow.document;
        
        var ifrm_body = ifrm.body;
        
        var ofile = ifrm.createElement("input");
        ifrm_body.appendChild(ofile);

    }

window.onload = show_on;
</script>
</head>
<body>
<span id="myinput"></span>
</body>
</html>

动态file上传需要马上创建一个iframe,然后在iframe中添加一个input,在IE中,很轻松就实现了.

轻松在IE中添加,但问题很快就来了..在FF中完全没反应..怎么回事?

原来FF中控制iframe必须用ifm.contentWindow.document.body来添加节点,因为它对空的页面默认添加body节点.所以修改为如下:

<html>
<head>
<script type="text/javascript">

    show_on = function(){
        var myinput = document.getElementById("myinput");
        
        var ifrm = document.createElement("iframe");
        ifrm.setAttribute("style","width:283px;height:230px;");
        ifrm.setAttribute("scrolling","no");
        ifrm.setAttribute("frameborder","1");
        myinput.appendChild(ifrm);
        ifrm = ifrm.contentWindow.document;
        
        var ifrm_body = ifrm.body;
        
        var ofile = ifrm.createElement("input");
        ifrm_body.appendChild(ofile);

    }

window.onload = show_on;
</script>
</head>
<body>
<span id="myinput"></span>
</body>
</html>

本来以为成功了,谁知道打开,还是什么都没有..怎么回事?用alert(ifrm_body.innerHTML);发现添加完全正常,发贴到优快云..有网友说是"消失的生命"..真贴切..

结果在第二天.,某位高人告诉我是FF延迟,通过setTimeout,在其中重新创建对象,加上延迟,结果创建成功了..

<html>
<head>
<script type="text/javascript">

    show_on = function(){
         myinput = document.getElementById("myinput");
        ifrm = document.createElement("iframe");
        ifrm.setAttribute("style","width:283px;height:230px;");
        ifrm.setAttribute("scrolling","no");
        myinput.appendChild(ifrm);
        ifrm_d = ifrm.contentWindow.document;
        var ifrm_body = ifrm_d.body;
        var ofile = ifrm_d.createElement("input");
        ofile.value="asdf";
        ifrm_body.appendChild(ofile);
        
        setTimeout(tt,"20ms");

    }
    
function tt(){
        ifrm_d = ifrm.contentWindow.document;
      
        var ifrm_body = ifrm_d.body;
        var ofile = ifrm_d.createElement("input");
        ifrm_body.appendChild(ofile);
}

window.onload = show_on;
</script>
</head>
<body>
<div id="myinput"></span>
<input type="button" id="sd" onClick="tt()">
</body>
</html>

神奇在于,把SetTimeout(tt(),0)同样正常运行..

这让我想起了在AJAX中,FF的BUG..

通过SetTimeout( fun,0)能解决许多问题..

下次如果再次出现"消失的生命",可以尝试用SetTimeout方法来解决..

60-008-024-使用-命令-flink如何动态支持依赖jar包提交
九师兄
03-12 1212
1.视界 2.概述 ​ 通常我们在编写一个flink的作业的时候，肯定会有依赖的jar包。flink官方希望你将所有的依赖和业务逻辑打成一个fat jar，这样方便提交，因为flink认为你应该对自己的业务逻辑做好单元测试，而不应该把这部分测试工作频繁提交到集群去做。但事实是我们往往不愿意打一个fat jar，我们希望将业务逻辑独立出来，依赖动态提交。可惜的是，flink并不支持这种提交模式。 ...
Python爬虫开发（四）：动态加载页面的解决方案与爬虫代理
01-13 1843
0x00 前言 如果读者读过我前面的关于爬虫的文章，应该大概都清楚我们现在可以对一个静态的web页面”为所欲为“了，但是技术的发展总是没有止境的，仅仅是这样对静态页面处理远远不够，要知道现在很多的web页面有意无意为了防止静态爬虫使用ajax技术动态加载页面，这就导致了在面对这些网站的时候，我们前面的技术并不能起到什么很好的效果，所以，我在本系列文章开头就说了会提供动态加载网页的解决方案，在这篇文章里，笔者就在这里提出这个解决方案，用来解决以前我们没有办法的问题。 0x01 动态页面解决方案Seleni
[一]烦透的动态file上传
Kenlist_world的专栏
03-11 833
         弄个file动态上传,xmlhttp不支持.         好,我忍,通过隐藏iframe吧         iframe竟然不能把父页面的节点移到里面,可能因为是不同句柄的DOM吧..         好,我忍,直接搞个可视的iframe吧,什么!?提交没有文件!?         ofrm.setAttribute("enctype","multipart/
FileBrowser Quantum上下文菜单：动态操作菜单生成机制
gitblog_00595的博客
08-30 956
还在为传统文件管理器僵硬的右键菜单而烦恼吗？每次右键点击，无论选择什么文件类型、无论当前处于什么视图状态，看到的都是千篇一律的菜单选项。这种"一刀切"的设计不仅降低了用户体验，还限制了操作的灵活性和效率。 FileBrowser Quantum的革命性上下文菜单系统彻底解决了这一痛点。通过智能化的动态菜单生成机制，它能够根据当前上下文环境、用户权限、文件类型和选择状态，实时生成最合适的操作选项，...
动态生成form表单，不在为表单烦恼
热门推荐
轻松搞定低代码
04-23 2万+
form-create是具有数据收集、校验和提交功能的表单生成器，包含input、复选框、单选框、输入框、下拉选择框等元素以及省市区三级联动、时间选择、日期选择、颜色选择、文件/图片上传功能，支持事件扩展。 欢迎大家star学习交流：github地址 1.1版本重大更新 内部重构 新增 省市区三级联动组件 新增 组件事件扩展 优化 文件上传,时间选择等组件 待完善 [ ]...
文件上传那些事儿
QcloudCommunity的博客
05-11 1027
最近把产品目前使用的FileUploader从老的组件库分离出来的，自己也查阅了相关的各种资料，对文件上传的这些事有了更进一步的了解。把这些知识点总结一下，供自己日后回顾，也供有需要的同学参考，同时也欢迎各位大牛拍砖指点共同学习。
实现文件上传量子计算处理：jQuery File Upload性能突破
gitblog_00299的博客
10-07 335
你是否还在为大文件上传耗时过长而烦恼？当用户上传数百兆的数据集时，传统上传工具往往让浏览器陷入假死状态，进度条停滞不前，最终导致用户体验下降和业务数据延迟。jQuery File Upload插件（[README.md](https://link.gitcode.com/i/423b84fa75efa3b92b10a4e190d88e0b)）通过**量子化分块传输**技术，将上传性能提升80%，彻...
文件上传革命：jQuery File Upload如何让开发效率飙升500%
最新发布
gitblog_00554的博客
12-13 835
还在为网页文件上传功能而烦恼吗？单文件上传速度慢如蜗牛、多文件选择操作繁琐、大文件上传频繁失败？这些问题不仅让用户体验大打折扣，更让开发者加班到深夜。今天，我要向你介绍一个改变游戏规则的工具——jQuery File Upload，它能让你的文件上传功能从"能用"升级到"惊艳"级别。 ## 痛点直击：为什么传统上传方式已经过时？ 让我们先来盘点一下传统文件上传的"七宗罪"： - **用户体验
动态，同时上传多个文件
我本无名的专栏
10-23 2084
我们有时候作上传功能的时候会让用户上传多个图片或文件，一个一个上传吧有点麻烦。如果做成死的，一次上次，三个，或是五个的，有时候还不够用，这就很烦了。下面这种方法，在上传的地方加一个按钮，如果用户想上传几个就点几次，这样就会出现多个上传框，让他选择，好了，不多说了。下面是代码前台代码html xmlns="http://www.w3.org/1999/xhtml" >head runat="serv
突破上传瓶颈：jQuery-File-Upload性能优化与测试实战指南
gitblog_00793的博客
08-23 622
你是否还在为大文件上传超时烦恼？客户投诉上传进度条卡顿？团队因兼容性问题反复调试？本文将从实战角度，系统讲解如何通过参数调优、分块上传与自动化测试，让jQuery-File-Upload在各种场景下保持高效稳定。读完你将掌握：5个核心优化参数配置、3种分块上传策略、完整测试流程与性能指标分析方法。 ## 项目基础与优化价值 jQuery-File-Upload是一款支持多文件选择、拖放上传、进...
n8n表单处理：动态表单数据收集
gitblog_00449的博客
10-01 344
你是否还在为手动收集、筛选和存储表单数据而烦恼？n8n作为一款工作流自动化平台（Workflow Automation Platform），结合了代码的灵活性和无代码的高效性，能帮助你轻松构建动态表单处理流程。本文将详细介绍如何使用n8n的表单节点（Form Node）实现数据的收集、验证与存储，无需复杂编程，让你在10分钟内完成一个实用的表单自动化流程。 ## 为什么选择n8n处理表单？ n...
jQuery File Upload：实现带进度条的文件上传
"jQuery File Upload是用于实现文件上传功能的Jquery组件，提供多文件上传、取消、删除等操作，还支持上传前的缩略图预览、文件大小显示，并且带有进度条显示功能。该组件兼容多种服务器端动态语言。在HTML结构中，...
新浪SAE PHP上传工具包发布
结合描述“还在为新浪SAE上传不能用而烦脑吗”，可以判断该资源旨在解决开发者在使用SAE平台时遇到的文件上传功能失效或配置复杂的问题。通过提供两个关键PHP脚本文件——sae_file_manager_json.php 和 sae_upload_...
优化网页上传体验：ASP文件上传控件详解
5. 上传进度条和上传剩余时间显示：这两个功能增强了用户体验，用户可以直观地看到文件上传的进度和预计剩余时间，减少用户对上传过程的不耐烦感。 对于ASP文件上传控件的技术实现，它可能依赖于ASP内置的组件，如...
浅入分析discuz编辑器
Kenlist_world的专栏
03-11 9099
因为工作需要..要把discuz嵌入到网站..并修改部分功能..晕..一、获取编辑器代码:          通过最简单的方法(看PHP代码的话会SI人的),直接打开网页,把HTML代码拿下来了,并且把CSS,JS都移出来了.通过筛选,把需要的JS都拿了.二、粗略看一看HTML代码:          基本把结构看通了,把我暂时不需要的删掉了.然后把结构基本看通了..是表格里加DIV结构.
JavaScript 的继承方式与取舍
Kenlist_world的专栏
03-11 1350
（序语：本人写得不是很好，如果有什么错误请指出或者联系我e-mail:kenlist@163.com）Javascript中的继承方式主要有3种.之所以会有多种继承方式,是因为ECMAScript制造者当初没有真正为继承定义一套完整的规定.事实上,这里的继承方式都是开发者们通过努力获得的.第一种(call继承法):使用call关键字,是调用函数(function对象)的函数.例如:
(小收获二)关于select标签与js的问题
Kenlist_world的专栏
03-11 957
okhaha在JS中获取select对象: var osid=document.getElementsByName("sid)[0];再获取option对象: var oOption = osid.getElementsByTagName("optoin");对option执行删除操作: for(var i=0;i执行后,发现只能删除第一个,第二个删除不了,而且根本没运
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值