文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传、拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能。这篇文章向大家推荐几款很棒的 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); });
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>
您可能感兴趣的相关文章
本文链接:精心推荐几款很棒的 JavaScript 文件上传插件
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。