两种文件上传的实现-Ajax上传和form+iframe
前言
话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了。HTML5支持多图片上传,而且支持ajax上传!而且支持上传之前图片的预览!而且支持图片拖拽上传!而且还是纯粹利用file控件实现!而且代码还超级简单!!!原谅我这个没见过世面的人这么激动==,但是说真的,有这么多优点,想不让人称赞都难啊!
HTML5 Ajax上传
html5的上传实现,是需要file控件以及XMLHttpRequest请求。下面是我使用原生js封装的一个上传插件:
|
相信大家也看到了,代码中出现了FormData
,这就是html5的神奇之处了。借助FormData轻松实现异步无刷新支持预览图片的多文件上传功能。而且,令人欣慰的是,现在已经有很多浏览器都已经支持HTML5了。
但是!!!IE9以下的版本不支持呀!!
除此之外,上面的方法还有一个弊端,因为使用了ajax的上传方式,所以不能支持跨域上传,如果必须要满足这两个业务场景,那就试试下面的方法吧,借助form和iframe来实现上传。下面来详细看一下:
form表单提交到iframe
html代码:
|
我们点击提交,可以看到下面的请求:
已经把文件上传。那么,加入这个upload.php接口可用,而且假如上传成功后,会返回:
|
我们要怎么去获取返回值,从而进行下一步的操作呢?因为我们是上传到了iframe中,所以我们只需要监听iframe的load事件,如果有返回值了,我们就能获取到,从而进行进一步处理。看js代码:
|
这样我们就完成了一个支持所有浏览器的上传文件操作了。还是很简单的吧^_^
结语
以上两种方法就可以上实现所有场景下的文件上传需求了。第一种方法便于理解,代码简单,便于理解,但是IE9及以上才支持;第二种方法是很原始的方法,支持所有浏览器,但是代码稍显复杂,看官们可以根据自己的业务需求来选择不同的方案。本文结束,谢谢大家!
相关文章
- [转] 通过Ajax方式上传文件,使用FormData进行Ajax请求
- ASP.NET实现二维码 ASP.Net上传文件 SQL基础语法 C# 动态创建数据库三(MySQL) Net Core 实现谷歌翻译ApI 免费版 C#发布和调试WebService ajax调用WebService实现数据库操作 C# 实体类转json数据过滤掉字段为null的字段
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
- ios 文件上传, post数据
- 【转】JSP使用上传文件,并生产高清缩略图示例
- c#中中读取嵌入和使用资源文件的方法
- MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传
- 纯H5 AJAX文件上传加进度条功能
- 文件上传和字段匹配
- day05 Struts2文件上传和下载---防重复提交
- java Socket Tcp示例三则(服务端处理数据、上传文件)
- 微信小程序使用wx.request封装fromdata数据进行文件上传
- Github(Gitee)之 建立 .gitignore 文件 屏蔽一些文件上传,不上传自己不需要的文件或者文件夹
- 文件上传流式处理commons-fileupload
- Yii2 使用十二 配合ajaxFileUpload 上传文件
- DreamWeaver CS5 搭建Tomcat服务器 运行Jsp文件
- SpringBoot的文件上传
- spring boot +ajax上传文件前后端分离完整实现示例代码
- scp上传文件、下载文件命令