`
blueion
  • 浏览: 40303 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

利用iframe模拟AJAX文件上传

阅读更多

目前的技术背景下,从网页上传文件常用的有两种方式:flash和form的input控件。

一般我们希望上传文件应该有这样几个功能:
1. 读取文件大小
2. 上传进度
3. 上传成功与否
4. 多文件同时异步上传

一、利用flash可以实现以上的文件上传机制,但是有个缺陷,不能支持https上传。另外js和flash的交互比较复杂,除了文件名之外,因为安全因素js还不能从flash的文件控件中获取其他文件信息(文件大小,绝对路径)。

二、利用form的input控件可以得到浏览器的原生支持,由于提交form需要刷新整个页面,为了达到异步上传的效果,可以在一个隐藏的iframe里提交这个form。

用input控件不能读取文件大小,不能知道上传进度,但是可以支持https,而且不用担心用户浏览器没有安装flash。

判断上传成功与否可以利用iframe的onload事件;实现多个文件同时上传可以利用多个form对应多个iframe;文件大小判断可以由server实现并返回结果。

另外有些页面的UI需要美化上传按钮,可以利用一个透明度为o的input遮盖在此按钮上面,并利用css的clip属性将input控件裁成跟按钮一样大就可以了。如果按钮上需要响应事件,那就要把input控件上的事件传过去。

 

分享到:
评论

相关推荐

    PHP+iframe模拟Ajax上传文件功能示例

    由于XMLHttpRequest在早期版本中不支持文件上传,开发者们便利用了`iframe`来模拟Ajax的文件上传功能。本篇文章将详细讲解如何使用PHP和iframe实现这一功能。 首先,我们需要理解为什么不能直接使用Ajax上传文件。...

    JSP_模拟AJAX实现无刷新文件上传

    然而,我们可以利用IFRAME(Inline Frame)来模拟实现AJAX式的无刷新文件上传,以达到类似的效果。 首先,我们需要理解AJAX的工作原理。AJAX允许我们在后台与服务器进行通信,更新部分网页内容,而无需刷新整个页面...

    真正实现ajax上传文件 兼容IE6789火狐谷歌世界之窗

    在实现Ajax文件上传时,我们需要利用HTML5中的FormData对象,这是一个允许我们在Ajax请求中发送键值对或者二进制数据的API。 对于不支持FormData的旧版IE浏览器,我们需要依赖IFrame和ActiveXObject。IFrame可以...

    ajax文件上传

    1. **IFrame模拟上传**:由于IE8不支持`FormData`和`XMLHttpRequest2`,我们可以利用IFrame创建一个隐藏的表单,将文件输入字段添加到这个表单中,然后提交表单到服务器。IFrame的`contentDocument`或`contentWindow...

    AjaxUpload.rar 文件上传

    AjaxUpload的核心是利用XMLHttpRequest对象与服务器进行交互,通过创建隐藏的iframe来处理文件上传,使得上传过程对用户来说几乎是透明的。 **一、AjaxUpload的工作原理** 1. 用户选择文件:在前端页面上,Ajax...

    ajaxupload在spring mvc4.2中实现简单文件上传

    它通过创建隐藏的IFrame和表单来模拟文件提交,避免了浏览器对跨域限制的问题,同时利用Ajax进行数据传输,实现无刷新的交互。 2. **Spring MVC 4.2**: Spring MVC是Spring框架的一部分,用于构建Web应用程序。...

    fileUpload(兼容IE的Ajax上传图片)

    在描述中提到的"ajaxfileupload.js"是一个流行的JavaScript库,用于处理Ajax文件上传,但可能在某些IE版本中存在兼容性问题。"fileUpload"这个解决方案就是为了解决这个问题,使得用户能够在IE8这样的老版本浏览器中...

    使用ajaxupload.js/ajaxfileupload.js实现文件上传

    它利用IFrame或者Flash来模拟Ajax上传,确保了较好的兼容性。同样,`ajaxfileupload.js`也提供了丰富的事件回调,如onStart、onComplete、onProgress等,让你能根据实际需求定制上传行为。使用此库时,你需要引入...

    js加iframe轻松实现异步图片上传 可以预览 兼容FF,chrome,ie9

    在图片上传场景下,IFrame常用于解决跨域问题和模拟POST提交,因为它可以创建一个独立的上下文环境,使得文件上传操作不会影响到主页面。 以下是实现步骤: 1. 创建一个`<input type="file">`元素,让用户选择需要...

    [php]ifame仿ajax图片上传预览,兼容IE\FF\Chrome

    本项目 "[php]ifame仿ajax图片上传预览,兼容IE\FF\Chrome" 提供了一种利用iframe技术实现跨浏览器兼容的图片上传预览方案。以下是关于这个项目的一些关键知识点和详细说明: 1. **Iframe(内联框架)**:Iframe是一...

    ajax图片上传教程+原码

    在网页开发中,图片上传和显示是不可或...尽管AJAX不能直接处理文件上传,但结合IFRAME技术,我们可以模拟出类似的效果,同时保持页面的无刷新特性。在整个过程中,重要的是确保安全性、用户体验和良好的错误处理机制。

    仿iframe效果Aajx文件上传实例

    总的来说,模拟iframe的Ajax文件上传方式能够实现无刷新的文件上传体验,同时避免了直接使用Ajax上传文件的限制。这种方法巧妙地利用了iframe作为临时的通信桥梁,使得页面的其他部分不受影响,保持了用户体验的流畅...

    关于ajaxfileupload 文件上传实例

    在Web开发中,文件上传是一项常见的功能,AjaxFileUpload是一个基于JavaScript和AJAX技术的文件上传组件,它允许用户在不刷新页面的情况下实现异步文件上传。本实例将重点讲解如何在Spring MVC框架下利用...

    asp仿163网盘无刷新文件上传

    总的来说,这个项目展示了如何使用ASP和AJAX技术构建一个用户友好的文件上传系统,模拟163网盘的无刷新体验。开发者通过熟练运用前端和后端技术,实现了高效、安全的文件上传流程。对于学习ASP编程和了解无刷新上传...

    用于web开发的文件上传的多种实现.docx

    本文主要探讨了多种文件上传的实现方法,包括基本上传、异步上传、使用File API以及利用Ajax进行上传,并涉及到上传进度的监测。 1. **基本上传方式**: 当文件输入框(`<input type="file">`)被包含在表单中时,...

    frameset 上传文件窗口最小化(未实现)

    在EXTJS中,可以利用它的组件模型和事件系统来实现更复杂的文件上传及跨框架通信功能。 6. **上传窗口的优化**:为了提升用户体验,可以考虑使用模态对话框(modal dialog)或浮动层(overlay)来代替传统的...

    ajaxupload

    在实际开发中,我们可能会使用到名为AJAXFileUpload的库,这是一个专为实现Ajax文件上传功能的JavaScript插件。它封装了上述的实现步骤,提供了一套简单的API,便于开发者快速集成到项目中。使用时,只需在HTML中...

    ASP.NET同时上传多个文件

    这里主要介绍基于旧版ASP.NET的解决方案,即通过JavaScript和隐藏的IFrame技术来模拟多文件上传。 1. **HTML部分**: 在页面上,我们需要创建一个`<input type="file">`元素,通常我们需要设置其`multiple`属性,...

    基于HTML5的可预览多图片Ajax上传

    我之前曾翻译编辑过一篇“Ajax Upload多文件上传插件”的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已。 HTML5是个好东东,其中之一就是...

Global site tag (gtag.js) - Google Analytics