文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。
1. Plupload
Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件。
![](https://i-blog.csdnimg.cn/blog_migrate/1e2f13eec6d44fee186f1fe2db2b86ae.png)
该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/cf91e72230eb6dc1b76b60c4a80faa4d.png)
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/a7f6e787f8db7dd23c3d4c1cf72e2cd9.png)
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/95ab3ff88e2896244068df13a13b1f58.png)
Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下:
支持单文件或多文件上传,可控制并发上传的文件数
在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java……
通过参数可配置上传文件类型及大小限制
通过参数可配置是否选择文件后自动上传
易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……)
通过接口参数和CSS控制外观
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/d1c33424b00e9ffedec9be957279f2ea.png)
6. jQuery Multiple File Upload Plugin
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/2bf1099de6bd3f59ce60797d11436c88.png)
7. jqUploader
jqUploader 是实现文件上传的jQuery插件
![](https://i-blog.csdnimg.cn/blog_migrate/184dfc009f19347516c7a4d54f31ae53.png)
jQuery Form Plugin 是一个扩展表单操作的 jQuery 插件,直接文件上传表单
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/90eb81d88d09184556544cb27ef2adfb.png)
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/cae13ab549eeb249395488dc98cb2a8f.png)
10. jqswfupload
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/6c1e5a26311e2abc0273b8a78ea1bd6b.png)
11. uploadprogress
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/59cf71f66a21037a3e56ad35aca27c0e.png)
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/ce1c69e1709682894016ba3468a37217.png)
13. Multiple File Upload With Progress Bar Using jQuery
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/54d8b55da0d420e15d223cf94a3d0071.png)
14. jQuery.upload
一个简单的 Ajax 文件上传插件
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/255d374e399dd951429ae4e3baf51275.png)
15.Ajax File Upload Script Using jQuery
jQuery File Uploader 使用 iframe 来处理上传过程
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/711c50cf525e694570e19dfc0a77f902.png)
16.jQuery Custom File Upload Input
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/41bd3d5c69cd23f1a416a50e6faa0319.png)
17. Image Upload and Cropping with PHP and Jquery
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/a36861feae2f11b37ef5ee4ab81b0b1c.png)
18. PHP & jQuery image upload and crop
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/9789550ba99b89d9dc0093f6dfb1eba5.png)
19. AJAX upload progress bars with jQuery, Django and nginx
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/d321f74c17f8ca364714a4f26f302b9b.png)
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/e1f053a5a20e238b49ce08860d580ae1.png)
21. AJAX Multiple File Upload Form Using jQuery
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/4d20f8b9fc8213474d499ac301bbe978.png)
22. FancyUpload – Swiff meets Ajax (v3.0)
FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload。MooTools是一个与prototype相类似的一个Ajax框架。
![jQuery File Upload](https://i-blog.csdnimg.cn/blog_migrate/8ac998b48380e5c439b3cc3e4ebe26eb.png)