`
blueion
  • 浏览: 39559 次
  • 性别: 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上传文件功能示例

    答案:可以使用iframe模拟Ajax上传文件。接下来博主将使用iframe来模拟Ajax来上传文件。 首先看一下效果图: 文件结构图: 09-iframe-upload.html文件: 页面中有一个表单,表单中有一个上传文件按钮和提交按钮,...

    Iframe模拟Jquery.Ajax

    本人开发的积累总结,Iframe模拟Ajax 可以跨越的操作。

    ajax实现文件上传

    ps:Ajax技术基本上可以说是由google公司带起来的,但少Gmail中上传文件用的还是 IFrame,所以说使用IFrame来上传文件是最好的选择。 我在这里这里用的技术是jsp,其实asp,php等也是一样可以这么实现的

    使用隐藏的Iframe实现ajax无刷新上传

    使用隐藏的Iframe实现ajax无刷新上传

    ajax iframe jsp 无刷新上传文件.zip

    ajax iframe jsp 无刷新上传文件+JavaScript字符串函数大全+如何自定义Struts2表单验证后的错误信息显示格式样式

    js动态创建上传表单通过iframe模拟Ajax实现无刷新

    { //创建iframe var iframe = document.createElement(“iframe”); document.body.appendChild(iframe); iframe.id = ‘iframeName’; iframe.name = ‘iframeName’; iframe.style.display = ‘none’; //创建form...

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

    AJAX无法实现文件上传功能,原因是JavaScript安全限制不能对文件执行操作,但是通过IFRAME框架可以模拟实现无刷新效果。虽说是无刷新的,但状态栏会刷新一下。代码是一个JSP的示例。

    ajax文件上传

    同时,ajax并不支持文件的上传,此时ajaxfileupload就应运而生了,本人,在此基础上经过改写,使其同时支持,多文件上传isMore(boolen)、序列化类型参数ContentType(Serial/json)’,并且给出了SpringMVC的文件...

    PHP的AJAX技术实现文件异步上传

    异步的文件上传是在现代的AJAX实现的Web应用里面经常要遇到,必须解决的问题。但是标准的AJAX类(XmlHttpRequest)无法实现传输 文件的功能。因此,这里讨论的内容就是如何在AJAX的技术的基础之上构建异步的文件上传...

    通过Django的form及Ajax等多种方式上传文件

    通过Django的Form方式上传文件,简单,但无法局部刷新实现ajax效果; 通过js或jQuery方式,需要使用FormData对象,仍有些浏览器不兼容; 通过Form+iframe方式上传文件,兼容性最好。 里面含有全部源代码。

    ajax iframe上传.

    ajax iframe上传.rar

    iframe实现Ajax文件上传效果示例

    Ajax文件上传效果实现的方法有很多,在本文将为大家介绍下使用iframe是如何实现的,感兴趣的朋友不要错过

    利用iframe实现ajax跨域通信的实现原理(图解)

    纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求。 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌套...

    Ajax无刷新上传文件( jsp版本)

    ps:Ajax技术基本上可以说是由google公司带起来的,但少Gmail中上传文件用的还是 IFrame,所以说使用IFrame来上传文件是最好的选择。 我在这里这里用的技术是jsp,其实asp,php等也是一样可以这么实现的

    iframe实现Ajax刷新

    实现ajax刷新技术原理,是你身边的好帮手

    jQuery实现文件编码成base64并通过AJAX上传的方法

    使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload。 ...

Global site tag (gtag.js) - Google Analytics