php的ajax文件上传插件,两款支持jquery拖拽上传插件（html5）jquery ajax上传文件插件下载 | 璞玉（POOY）...

推荐两款支持jquery拖拽上传插件(html5)

HTML5 File Drag and Drop Upload with jQuery and PHP

jQuery-File-Upload

之前详细介绍了《uploadify 3.2 使用详解及问题》，相信很多人都用过这个Uploadify。 uploadfiy这个插件是基于js里面的jquery库写的。结合了ajax和flash，实现了这个多线程+ajax异步上传的功能。

今天给大家带来的是两款支持jquery拖拽上传插件，jQuery文件上传插件(支持拖动上传) ，其中一款支持html5，而且效果很炫！

1 : HTML5 File Drag and Drop Upload with jQuery and PHP

首先上一下图先：

HTML5 File Drag and Drop Upload with jQuery and PHP

看到效果了吧，支持 Data URI 和 MHTML图片预览，看上面的那个预览图就是的，之前写到《uploadify 后台处理》的时候，是利用的服务器端的ImageMagick来处理的，如果了解Data URI的同学，肯定知道用这个会节省很多服务器端不必要的开支！

什么是HTML5 文件上传

上传文件运用了HTML5的三个新特性：1、新的文件读取api(File Reader API) 2、新的拖拽api(Drag & Drop API) 3、新的IO-ajax(增加了二进制数据传输)。下面是HTML5文件上传的步骤：

1、用户从本地计选择一个或多个文件拖拽到浏览器窗口。支持拖拽的的浏览器会触发一个事件，事件包括一些有用的信息，其中包涵被选中的文件信息。

2、用HTML5的文件读取api，以二进制数据读取被选文件，并存储到内存中。

3、用XMLHttpRequest对象的新方法-sendAsBinary，将数据传到服务器。

jQuery插件— Filedrop已经封装好这些功能，并且提供配置接口来限制上传文件的大小和指定回调函数。非常方便运用到自己的应用中。

目前来看，文件上传只能在firefox和chrome浏览器中使用，但其他主流浏览器的下个版本已经计划支持该功能了。当然对于不支持的浏览器可以简单的放置input file控件来代替。

jQuery文件上传插件(支持拖动上传)HTML5 File Drag and Drop Upload with jQuery and PHP下载地址：

2：jQuery-File-Upload

还是一如既往的先看看jQuery-File-Upload效果吧。

jQuery-File-Upload

默认的界面还算比较简洁，面板上面设置了一些常用的按钮。jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

jQuery文件上传插件(支持拖动上传) 就介绍到这里，有空贴出分析代码。共大家一起讨论。