说到File API,比如有意思就是图片上传了。国外有一个网站叫min.us  用户只需要把图片拖到网页面中,然后自己进行排序就OK了,很方便。

下面是关于它的一段介绍视频:

 

目前网页上传分为三种:

1、form提交

2、flash上传

3、插件上传

各有利弊,fomr提交就是没进度条,不太好取消。flash比较难搞的就是在非ie中浏览器认为flash是新窗口会话,当前网页的cookie无法传递到flash上传工具中,而针对这个一般就是用JS把当前页面中的cookie通过flash再传给后台,而对于一个后台如果使用了统一验证身份的接口那可能会有点麻烦。第三种优势很明显,比如适合如QQ空间这样用户需要大批量上传图片的,缺点也显而易见:跨浏览器上存在问题。而HTML5中的FileReader对象与as3中的很像,只不过目前as3中的方法比这个多(有兴趣可以自己去看看adobe的lives docs,对比一下两者的区别与共同点)。

 

讲了这么多,回到正题:File API,拿图片上传为例(FileFileReader):

1、首先,如何控制用户单选、多选。as3中是两个不同的对象:FileReference、FileReferenceList,在as3中可以使用FileFilter过滤只允许选择的上传文件。as3中需要使用flash player 10+才支持本地预览,而且图片不易过大。

HTML5中允许选择多个文件:

<input type="file" multiple>

只允许上传一个文件:

<input  type="file" single>

2、如何让用户只能上传指定的文件格式,如上传图片组件只允许png、jpg、gif、jpeg、bmp后缀格式的图片。

我尝试着去寻找HTML5中是否也如as3中可以让开发者自定义过滤选择文件呢,结果被我找到了http://en.wikipedia.org/wiki/File_select  添加一个属性就好了accept="image/gif,image/png"

HTML5的File API

默认为“自定义文件”,如果我选择“所有文件”,所有的文件都将显示出来。

HTML5的File API

HTML5的File API

3、上传文件

这里遇到一个问题,如何获取ajax发送过去的图片信息。因为在ajax中使用的是setRequestHeader将图片信息传给后台,因为使用的nginx,无法直接获取

自定义的http-header,就修改了fastcgi-params,加了三项:

HTML5的File API 
关于定义的配置规则,可以参考这一篇文章:nginx下php获取自定义请求头参数的方法

 

搜索了很多关于html5 upload的例子,有人用.net、ruby写了,但没有找到用php写的(有是有,不过是使用提交form至iframe的方法,不符合这里的需求),比如这个:http://valums.com/ajax-upload/   http://www.atwebresults.com/php_ajax_image_upload/

查了很久(已经很晚了,明天还得上班就不折腾了),暂时放弃php的部分,有空再写完整的例子,重点是看File、FileReader的方法(实现了本地预览的功能)

本地运行的效果:

HTML5的File API

 

有空再把完整的demo提供下载(暂时缺省后台php保存文件的方法),html的源码:

>

相关文章:

  • 2021-07-25
  • 2022-02-22
  • 2022-01-02
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-22
猜你喜欢
  • 2021-05-17
  • 2021-10-09
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-02-19
  • 2022-12-23
相关资源
相似解决方案