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

最新推荐文章于 2023-09-09 20:13:48 发布

寻找Simple

最新推荐文章于 2023-09-09 20:13:48 发布

阅读量543

点赞数

本文转自：http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-five.html

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:  
varurl = 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) {  
varprogress = 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); });<span style= 
        "line-height: 1.5;" 
        >　</span>

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）手动触发上传

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

(2) 编辑文件名称

[javascript]view plaincopyprint? 
       
 <!DOCTYPE html>  
 <html>  
 <head>  
 <metacharset="utf-8">  
 <title>Fine Uploader - jQuery Wrapper Minimal Demo</title>  
 <linkhref="fineuploader-{VERSION}.css"rel="stylesheet">  
 </head>  
 <body>  
 <divid="jquery-wrapped-fine-uploader"></div>  
 <divid="triggerUpload"class="btn btn-primary"style="margin-top: 10px;">  
 <iclass="icon-upload icon-white"></i> Upload now  
 </div>  
 <scriptsrc="http://code.jquery.com/jquery-latest.js"></script>  
 <scriptsrc="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）自定义选项

[javascript]view plaincopyprint? 
       
 <divid="restricted-fine-uploader"></div>  
 <scriptsrc="http://code.jquery.com/jquery-latest.js"></script>  
 <scriptsrc="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('<divclass="alert alert-error">' + message + '</div>');  
 }  
 });  
 });  
 </script>  

（4）显示图片缩略图

[javascript]view plaincopyprint? 
       
 <divid="thumbnail-fine-uploader"></div>  
 <scriptsrc="http://code.jquery.com/jquery-latest.js"></script>  
 <scriptsrc="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('<imgsrc="img/success.jpg"alt="' + fileName + '">');  
 }  
 });  
 });  
 </script>  

（5）限制文件上传数

[javascript]view plaincopyprint? 
       
 <divid="filelimit-fine-uploader"></div>  
 <scriptsrc="http://code.jquery.com/jquery-latest.js"></script>  
 <scriptsrc="jquery.fineuploader-{VERSION}.js"></script>  
 <script>  
 $(document).ready(function() {  
 $('#filelimit-fine-uploader').fineUploader({  
 request: {  
 endpoint: 'server/success.html'  
 },  
 validation: {  
 itemLimit: 3  
 }  
 });  
 });  
 </script>  