【精心推荐】几款极好的 JavaScript 文件上传插件
文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传、拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能。这篇文章向大家推荐几款很棒的 JavaScript 文件上传功能增强插件。
这是最受欢迎的 jQuery 文件上传组件,支持批量上传,拖放上传,显示上传进度条以及校验功能。
支持预览图片、音频和视频,支持跨域上传和客户端图片缩放,支持的服务端平台有:PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。
使用示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $( 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 即可:
1 | <form id= "my-awesome-dropzone" action= "/target" class = "dropzone" ></form> |
或者手动实例化:
1 | new Dropzone( "div#my-dropzone" , { /* options */ }); |
可以添加更多参数:
1 | Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 }; |
发可以自定义事件:
1 2 3 4 5 6 7 8 | 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); }); |
Uploadify 有两个版本,HTML5 方法上传版本和传统的 Flash 上传。支持高度自定义,可以完美的继承到你的网站中。
Flash 版本兼容性好,使用示例:
1 2 3 4 5 6 7 8 | $( function () { $( "#file_upload_1" ).uploadify({ height : 30, swf : '/uploadify/uploadify.swf' , uploader : '/uploadify/uploadify.php' , width : 120 }); }); |
这个 JavaScript 插件可以帮助你在网站中集成体验极好的文件上传功能。可以结合 jQuery 或者 Bootstrap 使用。
主要特色:
- 批量上传
- 显示进度条
- 拖放上传
- 自动或者手动上传,可取消
- 自定义错误提示信息
- 自动或者手动重试
- 内置的校验规则
- 可编辑文件名称
使用示例:
(1)手动触发上传
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <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)编辑文件名称
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <! 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)自定义选项
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <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)显示图片缩略图
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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)限制文件上传数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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> |
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
2012-09-25 网页矢量素材:33套精美的免费 Banner 素材下载
2008-09-25 带有命名方法的委托与带有匿名方法的委托