龙都娱乐»JavaScript»几款极好的 JavaScript 文件上传插件

几款极好的 JavaScript 文件上传插件

来源:梦想天空 发布时间:2013-09-27 阅读次数:
  文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传、拖放上传,需要龙都娱乐花费大量的时间和精力去处理,以期实现好用的上传功能。这篇文章向大家推荐几款很棒的 JavaScript 文件上传功能增强插件。   jQuery File Uploader   这是最受欢迎的 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   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); });    插件下载      在线演示   Uploadify   Uploadify 有两个版本,HTML5 方法上传版本和传统的 Flash 上传。支持高度自定义,可以完美的继承到你的网站中。   Flash 版本兼容性好,使用示例: $(function() { $("#file_upload_1").uploadify({ height : 30, swf : '/uploadify/uploadify.swf', uploader : '/uploadify/uploadify.php', width : 120 }); });   插件下载      在线演示   FineUploader   这个 JavaScript 插件可以帮助你在网站中集成体验极好的文件上传功能。可以结合 jQuery 或者 Bootstrap 使用。   主要特色:
  1. 批量上传
  2. 显示进度条
  3. 拖放上传
  4. 自动或者手动上传,可取消
  5. 自定义错误提示信息
  6. 自动或者手动重试
  7. 内置的校验规则
  8. 可编辑文件名称
  使用示例:   (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>   插件下载      在线演示
QQ群:WEB龙都娱乐官方群(515171538),验证消息:10000
微信群:加小编微信 849023636 邀请您加入,验证消息:10000
提示:更多精彩内容关注微信公众号:全栈龙都娱乐中心(fsder-com)
网友评论(共2条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共2条评论
登录会员中心
龙都娱乐