【精心推荐】几款极好的 JavaScript 文件上传插件

转载

mb638413918930b 2022-11-29 14:21:21 博主文章分类：Web前端

转载自：点击打开链接

　　文件上传功能作为网页重要的组成部分，几乎无处不在，从简单的单个文件上传到复杂的批量上传、拖放上传，需要开发者花费大量的时间和精力去处理，以期实现好用的上传功能。这篇文章向大家推荐几款很棒的 JavaScript 文件上传功能增强插件。

这是最受欢迎的 jQuery 文件上传组件，支持批量上传，拖放上传，显示上传进度条以及校验功能。

支持预览图片、音频和视频，支持跨域上传和客户端图片缩放，支持的服务端平台有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。

使用示例：

`$(` `function` `() {` `'use strict'` `;` `// Change this to the location of your server-side upload handler:` `var` `url = window.location.hostname ===` `'blueimp.github.io'` `?` `'//jquery-file-upload.appspot.com/'` `:` `'server/php/'` `;` `$(` `'#fileupload'` `).fileupload({` `url: url,` `dataType:` `'json'` `,` `done:` `function` `(e, data) {` `$.each(data.result.files,` `function` `(index, file) {` `$(` `'<p/>'` `).text(file.name).appendTo(` `'#files'` `);` `});` `},` `progressall:` `function` `(e, data) {` `var` `progress = parseInt(data.loaded / data.total * 100, 10);` `$(` `'#progress .progress-bar'` `).css(` `'width'` `,` `progress +` `'%'` `);` `}` `}).prop(` `'disabled'` `, !$.support.fileInput)` `.parent().addClass($.support.fileInput ? undefined :` `'disabled'` `);` `});`

DropzoneJS 是一个用于现代浏览器的开源的拖放上传插件，最大的特色是即时图片预览功能。

使用方法非常简单，只需添加 class 即可：

`<form id=` `"my-awesome-dropzone"` `action=` `"/target"` `class` `=` `"dropzone"` `></form>`

或者手动实例化：

`new` `Dropzone(` `"div#my-dropzone"` `, {` `/* options */` `});`

可以添加更多参数：

`Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 };`

发可以自定义事件：

`Dropzone.options.myDropzone({` `init:` `function` `() {` `this` `.on(` `"error"` `,` `function` `(file, message) { alert(message); });` `}` `});` `// or if you need to access a Dropzone somewhere else:` `var` `myDropzone = Dropzone.forElement(` `"div#my-dropzone"` `);` `myDropzone.on(` `"error"` `,` `function` `(file, message) { alert(message); });<span style=` `"line-height: 1.5;"` `>　</span>`

Uploadify 有两个版本，HTML5 方法上传版本和传统的 Flash 上传。支持高度自定义，可以完美的继承到你的网站中。

Flash 版本兼容性好，使用示例：

`$(` `function` `() {` `$(` `"#file_upload_1"` `).uploadify({` `height : 30,` `swf :` `'/uploadify/uploadify.swf'` `,` `uploader :` `'/uploadify/uploadify.php'` `,` `width : 120` `});` `});`

这个 JavaScript 插件可以帮助你在网站中集成体验极好的文件上传功能。可以结合 jQuery 或者 Bootstrap 使用。

主要特色：

使用示例：

（1）手动触发上传

`<div id=` `"manual-fine-uploader"` `></div>` `<div id=` `"triggerUpload"` `class` `=` `"btn btn-primary"` `style=` `"margin-top: 10px;"` `>` `<i` `class` `=` `"icon-upload icon-white"` `></i> Upload now` `</div>` `<script src=` `"http://code.jquery.com/jquery-latest.js"` `></script>` `<script src=` `"jquery.fineuploader-{VERSION}.js"` `></script>` `<script>` `$(document).ready(function() {` `var manualuploader = $(` `'#manual-fine-uploader'` `).fineUploader({` `request: {` `endpoint:` `'server/handleUploads'` `},` `autoUpload:` `false` `,` `text: {` `uploadButton:` `'<i class="icon-plus icon-white"></i> Select Files'` `}` `});` `$(` `'#triggerUpload'` `).click(function() {` `manualuploader.fineUploader(` `'uploadStoredFiles'` `);` `});` `});` `</script>`

（2）编辑文件名称

`<!` `DOCTYPE` `html>` `<html>` `<head>` `<meta charset=` `"utf-8"` `>` `<title>Fine Uploader - jQuery Wrapper Minimal Demo</title>` `<link href=` `"fineuploader-{VERSION}.css"` `rel=` `"stylesheet"` `>` `</head>` `<body>` `<div id=` `"jquery-wrapped-fine-uploader"` `></div>` `<div id=` `"triggerUpload"` `class` `=` `"btn btn-primary"` `style=` `"margin-top: 10px;"` `>` `<i` `class` `=` `"icon-upload icon-white"` `></i> Upload now` `</div>` `<script src=` `"http://code.jquery.com/jquery-latest.js"` `></script>` `<script src=` `"jquery.fineuploader-{VERSION}.js"` `></script>` `<script>` `$(document).ready(function () {` `$(` `'#myFineUploader'` `).fineUploader({` `request: {` `endpoint:` `'server/handleUploads'` `},` `editFilename: {` `enabled:` `true` `},` `autoUpload:` `false` `});` `$(` `'#triggerUpload'` `).click(function() {` `$(` `'#myFineuploader'` `).fineUploader(` `'uploadStoredFiles'` `);` `});` `</script>` `</body>` `</html>`

（3）自定义选项

`<div id=` `"restricted-fine-uploader"` `></div>` `<script src=` `"http://code.jquery.com/jquery-latest.js"` `></script>` `<script src=` `"jquery.fineuploader-{VERSION}.js"` `></script>` `<script>` `$(document).ready(function() {` `$(` `'#restricted-fine-uploader'` `).fineUploader({` `request: {` `endpoint:` `'server/success.html'` `},` `multiple:` `false` `,` `validation: {` `allowedExtensions: [` `'jpeg'` `,` `'jpg'` `,` `'txt'` `],` `sizeLimit:` `51200` `//` `50` `kB =` `50` `*` `1024` `bytes` `},` `text: {` `uploadButton:` `'Click or Drop'` `},` `showMessage: function(message) {` `// Using Bootstrap's classes` `$(` `'#restricted-fine-uploader'` `).append(` `'<div class="alert alert-error">'` `+ message +` `'</div>'` `);` `}` `});` `});` `</script>`

（4）显示图片缩略图

`<div id=` `"thumbnail-fine-uploader"` `></div>` `<script src=` `"http://code.jquery.com/jquery-latest.js"` `></script>` `<script src=` `"jquery.fineuploader-{VERSION}.js"` `></script>` `<script>` `$(document).ready(function() {` `$(` `'#thumbnail-fine-uploader'` `).fineUploader({` `request: {` `endpoint:` `'server/success.html'` `},` `validation: {` `allowedExtensions: [` `'jpeg'` `,` `'jpg'` `,` `'gif'` `,` `'png'` `]` `},` `text: {` `uploadButton:` `'Click or Drop'` `}` `}).on(` `'complete'` `, function(event, id, fileName, responseJSON) {` `if` `(responseJSON.success) {` `$(this).append(` `'<img src="img/success.jpg" alt="'` `+ fileName +` `'">'` `);` `}` `});` `});` `</script>`

（5）限制文件上传数

`<div id=` `"filelimit-fine-uploader"` `></div>` `<script src=` `"http://code.jquery.com/jquery-latest.js"` `></script>` `<script src=` `"jquery.fineuploader-{VERSION}.js"` `></script>` `<script>` `$(document).ready(function() {` `$(` `'#filelimit-fine-uploader'` `).fineUploader({` `request: {` `endpoint:` `'server/success.html'` `},` `validation: {` `itemLimit:` `3` `}` `});` `});` `</script>`