5个最佳的javascript文件上传插件

泡在网上的日子 / 文 发表于2016-12-23 16:50 次阅读 文件上传,插件

浏览器自带的文件上传实在是太寒酸了,因此需要一些插件来增强文件上传的体验,这里不考虑flash做成的插件,毕竟是快要被淘汰的东西了。这篇文章的资源均来自https://dcrazed.com/html5-jquery-file-upload-scripts/ 。我选择了其中自己觉得可用性比较强的几个。

Mini AJAX File Upload Form

这个插件的UI和体验都非常棒,不过它依赖于下面介绍的jQuery File Upload plugin

特点

  • 支持多文件上传

  • 支持一次选择多个文件上传

  • 可上传任意文件

  • 拖拽支持

  • 无需flash

  • 小巧的上传表单适合移动设备

  • 简洁的进度条

  • 可随时取消

  • 有文档

  • 免费

Demo|Download

mini-upload.jpg

Dropzone JS

一个轻量级的文件上传插件,使用起来非常简单,支持jquery,但并不依赖jquery,文档齐全,非常推荐。

特点

  • 响应式设计

  • 支持多文件上传

  • 支持所有文件格式

  • 图片上传可预览

  • 顶级的UI设计

  • 取消和删除文件的选项

  • 拖拽支持

  • 支持一次选择多个文件上传

  • 免费

Demo|Download

dropzone-jsscript.jpg

jQuery File Upload Demo

这个插件就不用多说了,可能是最火的文件上传插件。功能齐全,文件上传的后端代码都实现了。不过感觉文档很乱,默认UI也不是很好看,如果让我选择我会选择上面的Dropzone JS。

特点

  • 拖拽支持

  • Html进度条

  • 支持多文件上传

  • 可恢复文件上传

  • 文件验证以及大小信息

  • 取消上传

  • 删除上传的文件

  • 上传失败显示alert提示。

  • 响应式设计

  • 支持Ruby

  • 支持php

  • 免费

DemoDownload

jQuery-ui-file-upload.jpg

Fine Uploader

一个给你流畅体验的文件上传插件,功能也比较齐全,感觉不错的样子,全浏览器支持,纯Javascript,不依赖其它项目,免费。

DemoDownload

0DE65EBD-754C-4FBE-AD53-6BE787495F2D.png

HTML5 File Uploads with jQuery

使用新的HTML5 API实现的拖拽上传插件,UI设计不错,只支持上传图片,可预览上传图片。只支持Chrome 和 Firefox,因此这个库的学习意义可能大于实际用途。

DemoDownload

jquery-drag-drop-uploader.jpg


收藏 赞 (0) 踩 (2)
上一篇:JavaScript 文件拖拽上传插件 dropzone.js 介绍
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能。 安装 下载dropzone.js文件并添加到页面中即可。Dropzone 不依赖 jQuery 框架。 启用 可以新建一个div元素,然后通过如下 JavaScript 代码启用 dropzone(如果你使用 jQuery): divid=dro
下一篇:React 还是 Vue: 你应该选择哪一个Web前端框架?
> 本文转载自:[众成翻译](http://www.zcfy.cc)> 译者:[凯伦酱](http://www.zcfy.cc/@karenfang)> 链接:[http://www.zcfy.cc/article/2159](http://www.zcfy.cc/article/2159)> 原文:[https://medium.com/js-dojo/react-or-vue-which-javascript-ui-libr