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> |
Javascript文件上传插件的更多相关文章
- 【精心推荐】几款极好的 JavaScript 文件上传插件
文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...
- 几款极好的 JavaScript 文件上传插件
文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...
- 7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1. jQuer ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- jQuery文件上传插件Uploadify(转)
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...
- Jquery-uploadify多文件上传插件使用介绍
Jquery-uploadify多文件上传插件使用起来非常的给力,在此记录一下使用方法. query-uploadify插件的属性设置 <script src="JS/jquery.m ...
- 20款最好的jQuery文件上传插件
当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...
- 大文件上传插件webupload插件
版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...
- Uploadify多文件上传插件.NET使用案例+PHP使用案例
ploadify是一个非常好用的多文件上传插件 插件下载:http://www.uploadify.com 下载后需要用到的文件: 接下来就是直接添加代码: Default.aspx代码 <%@ ...
随机推荐
- 17 个方面,综合对比 Kafka、RabbitMQ、RocketMQ、ActiveMQ 四个分布式消息队列
原文:https://mp.weixin.qq.com/s/lpsQ3dEZHma9H0V_mcxuTw 一.资料文档 二.开发语言 三.支持的协议 四.消息存储 五.消息事务 六.负载均衡 七.集群 ...
- flask实战-个人博客-视图函数
视图函数 在上面我们创建了所有必须的模型类.模板文件和表单类.经过程序规划和设计后,我们可以创建大部分视图函数.这些视图函数暂时没有实现具体功能,仅渲染对应的模板,或是重定向到其他视图.以blog蓝本 ...
- 去掉VSS控制
1:删除.vssscc.vssver.scc .项目名.csproj.vspscc文件 2:.csproj文件删除以下内容 SccProjectName = "SAK" S ...
- 水晶报表 VS2010 应用
VS.NET2010水晶报表安装部署[VS2010] 欢迎C#高手加盟QQ群:9340166 水晶报表VS2010版IDE安装标准版SAP Crystal Reports, version for ...
- scrapy框架--?乱码unicode
安装 pip install scrapy 建立一个爬虫项目 scrapy startproject 项目名称 scrapy startproject itcast 进入itcast文件夹 生成一个爬 ...
- 修改MyEclipse/Eclipse左侧文字大小(MacOS/Windows)
一.Windows 首先找到 Eclipse/MyEclipse 的安装目录,然后找到如下目录: \plugins\org.eclipse.ui.themes_1.1.200.v20160815-05 ...
- 各类app的小结
各类app小结: 一.原生app: 二.webapp: 无法调用底层设备的api 三.混合app的方法: 1.原生app 嵌入 2.flutter 3.react native 4.AppCan( ...
- 掌握Visual Studio断点
我知道你现在在想什么.断点?真的吗?关于断点有什么需要掌握的?你按F9然后停在代码行.如果你是这么想的,这篇文章是给你的:继续读 Visual Studio提供了一组相当丰富的断点类型和操作,可以使您 ...
- 我对网络IO的理解
Unix/Linux系统下IO主要分为磁盘IO,网络IO,我今天主要说一下对网络IO的理解,网络IO主要是socket套接字的读(read).写(write),socket在Linux系统被抽象为流( ...
- GDAL在VS下配置测试
刚才在VS2013里面配置了一下GDAL,然后就测试了配置成功与否.熟料,竟然发现在微软的Visual Studio 2013版本中,调用MessageBox()这个函数的时候报错了. 错误信息如下 ...