目前的技术背景下,从网页上传文件常用的有两种方式: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控件上的事件传过去。
分享到:
相关推荐
答案:可以使用iframe模拟Ajax上传文件。接下来博主将使用iframe来模拟Ajax来上传文件。 首先看一下效果图: 文件结构图: 09-iframe-upload.html文件: 页面中有一个表单,表单中有一个上传文件按钮和提交按钮,...
本人开发的积累总结,Iframe模拟Ajax 可以跨越的操作。
ps:Ajax技术基本上可以说是由google公司带起来的,但少Gmail中上传文件用的还是 IFrame,所以说使用IFrame来上传文件是最好的选择。 我在这里这里用的技术是jsp,其实asp,php等也是一样可以这么实现的
使用隐藏的Iframe实现ajax无刷新上传
ajax iframe jsp 无刷新上传文件+JavaScript字符串函数大全+如何自定义Struts2表单验证后的错误信息显示格式样式
{ //创建iframe var iframe = document.createElement(“iframe”); document.body.appendChild(iframe); iframe.id = ‘iframeName’; iframe.name = ‘iframeName’; iframe.style.display = ‘none’; //创建form...
AJAX无法实现文件上传功能,原因是JavaScript安全限制不能对文件执行操作,但是通过IFRAME框架可以模拟实现无刷新效果。虽说是无刷新的,但状态栏会刷新一下。代码是一个JSP的示例。
同时,ajax并不支持文件的上传,此时ajaxfileupload就应运而生了,本人,在此基础上经过改写,使其同时支持,多文件上传isMore(boolen)、序列化类型参数ContentType(Serial/json)’,并且给出了SpringMVC的文件...
异步的文件上传是在现代的AJAX实现的Web应用里面经常要遇到,必须解决的问题。但是标准的AJAX类(XmlHttpRequest)无法实现传输 文件的功能。因此,这里讨论的内容就是如何在AJAX的技术的基础之上构建异步的文件上传...
通过Django的Form方式上传文件,简单,但无法局部刷新实现ajax效果; 通过js或jQuery方式,需要使用FormData对象,仍有些浏览器不兼容; 通过Form+iframe方式上传文件,兼容性最好。 里面含有全部源代码。
ajax iframe上传.rar
Ajax文件上传效果实现的方法有很多,在本文将为大家介绍下使用iframe是如何实现的,感兴趣的朋友不要错过
纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求。 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌套...
ps:Ajax技术基本上可以说是由google公司带起来的,但少Gmail中上传文件用的还是 IFrame,所以说使用IFrame来上传文件是最好的选择。 我在这里这里用的技术是jsp,其实asp,php等也是一样可以这么实现的
实现ajax刷新技术原理,是你身边的好帮手
使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload。 ...