分享5个好用的javascript文件上传插件

2019-11-15,

文件上传是我们开发网站程序时经常遇到的功能,选择一个功能强大,使用简单的上传插件可以节省我们很多开发时间,下面就为大家介绍5个不错的javascript文件上传插件

这篇文章的资源均来自https://dcrazed.com/html5-jquery-file-upload-scripts/ 。我选择了其中自己觉得可用性比较强的几个。

Mini AJAX File Upload Form

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

特点

  • 支持多文件上传

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

  • 可上传任意文件

  • 拖拽支持

  • 无需flash

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

  • 简洁的进度条

  • 可随时取消

  • 有文档

  • 免费

演示  下载

Dropzone JS

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

特点

  • 响应式设计

  • 支持多文件上传

  • 支持所有文件格式

  • 图片上传可预览

  • 顶级的UI设计

  • 取消和删除文件的选项

  • 拖拽支持

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

  • 免费

演示  下载

jQuery File Upload Demo

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

特点

  • 拖拽支持

  • Html进度条

  • 支持多文件上传

  • 可恢复文件上传

  • 文件验证以及大小信息

  • 取消上传

  • 删除上传的文件

  • 上传失败显示alert提示。

  • 响应式设计

  • 支持Ruby

  • 支持php

  • 免费

演示  下载

Fine Uploader

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

演示  下载

HTML5 File Uploads with jQuery

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

演示  下载

这5款好用的JS上传插件总体来说还是不错的,当然国内也有不少优秀的JS上传插件,以后我们将为大家分享国内优秀JS上传插件

您可能感兴趣的文章:

  • 原生JS实现前端本地文件上传
  • JS实现可视化文件上传
  • js实现文件上传功能 后台使用MultipartFile
  • JS+Struts2多文件上传实例详解
  • vue.js 图片上传并预览及图片更换功能的实现代码
  • php+croppic.js实现剪切上传图片功能
  • JavaScript使用享元模式实现文件上传优化操作示例
  • JS实现图片上传多次上传同一张不生效的处理方法
  • js实现图片上传并预览功能
  • vue.js图片转Base64上传图片并预览的实现方法
  • Angularjs实现多图片上传预览功能
  • JavaScript实现异步图像上传功能
  • SpringBoot+Vue.js实现前后端分离的文件上传功能
  • node.js自动上传ftp的脚本分享
  • JS实现的文件拖拽上传功能示例
  • Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
  • JS和Canvas实现图片的预览压缩和上传功能
  • JavaScript代码实现txt文件的上传预览功能
  • js 实现 input type="file" 文件上传示例代码
  • js实现上传图片预览的方法
  • Servlet+Jsp实现图片或文件的上传功能具体思路及代码
  • 上传图片预览JS脚本 Input file图片预览的实现示例
  • JS实现上传图片的三种方法并实现预览图片功能
  • js实现图片上传并正常显示
  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
  • JS中使用FormData上传文件、图片的方法
  • 客户端js判断文件类型和文件大小即限制上传大小
  • js获取上传文件的绝对路径实现方法
  • 原生JS和jQuery版实现文件上传功能
  • 微信JSSDK上传图片
  • 简单实现js上传文件功能
  • JS文件上传神器bootstrap fileinput详解
  • js实现上传图片之上传前预览图片
  • Javascript图片上传前的本地预览实例
  • 学习使用AngularJS文件上传控件
  • JS简单实现文件上传实例代码(无需插件)

《分享5个好用的javascript文件上传插件.doc》

下载本文的Word格式文档,以方便收藏与打印。