Javascript文件上传插件

 

jQuery File Uploader

Javascript文件上传插件_第1张图片

这是最受欢迎的 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) {
                 $( '

' ).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

Javascript文件上传插件_第2张图片

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

使用方法非常简单,只需添加 class 即可:

?
1
"my-awesome-dropzone" action= "/target" class = "dropzone" >

或者手动实例化:

?
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

Javascript文件上传插件_第3张图片

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
     });
});

插件下载      在线演示

 

FineUploader

Javascript文件上传插件_第4张图片

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

主要特色:

  • 批量上传
  • 显示进度条
  • 拖放上传
  • 自动或者手动上传,可取消
  • 自定义错误提示信息
  • 自动或者手动重试
  • 内置的校验规则
  • 可编辑文件名称

使用示例:

(1)手动触发上传

(2)编辑文件名称

(3)自定义选项

(4)显示图片缩略图

(5)限制文件上传数

插件下载      在线演示

 

 

你可能感兴趣的