Skip to content

CeBkCn/web-uploader

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

web-uploader

js (html5 + html4) 文件上传管理器,支持上传进度显示,支持图片预览+缩放,支持 IE6+、Firefox、Chrome等。

博客园详细介绍

图片上传介绍

###特点:

  • 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB
  • 纯JS代码,无需Flash,无需更改后台代码即可实现带进度条(IE10+、其它标准浏览器)的上传,其它(eg:IE6+)自动降级为传统方式上传
  • 单独的图片上传UI,支持图片预览(IE6+、其它浏览器)和缩放(IE10+、其它浏览器)
  • 上传核心与UI界面分离,可以很方便的定制上传界面包括上传按钮
  • 上传文件的同时可以指定上传参数,支持上传类型过滤
  • 完善的事件回调,可针对上传的每个过程进行单独处理
  • 方便的UI接口,上传界面可以随心所欲的定制

###演示环境(其它语言可自行实现服务端接收和网站部署) 演示前请在根目录下创建upload文件夹,以保存上传文件
执行程序:api/upload.ashx

asp.net 4.0+ iis 

Node.js 演示见web-uploader-node

###简单调用示例 例:一般文件上传,使用默认的UI

1. 导入样式文件(若自己实现UI接口,则无需导入默认的样式文件) <link href="css/uploader.css" rel="stylesheet" type="text/css" /> 2. 导入js文件(可自行合并,若自己实现UI接口,则无需导入 Q.Uploader.UI.js 文件) <script type="text/javascript" src="js/Q.js"></script> <script type="text/javascript" src="js/Q.Uploader.js"></script> <script type="text/javascript" src="js/Q.Uploader.UI.js"></script> 或 <script type="text/javascript" src="Q.Uploader.all.js"></script> 3. 调用 new Q.Uploader({	url:"api/upload.ashx",	target: element, //上传按钮	view: element //上传任务视图 }); 

例:图片上传+预览+缩放

1. 导入样式文件(若自己实现UI接口,则无需导入默认的样式文件) <link href="css/uploader-image.css" rel="stylesheet" type="text/css" /> 2. 导入js文件(可自行合并) <script type="text/javascript" src="js/Q.js"></script> <script type="text/javascript" src="js/Q.Uploader.js"></script> <script type="text/javascript" src="js/Q.Uploader.Image.js"></script> 或 <script type="text/javascript" src="Q.Uploader.image.all.js"></script> 3. 调用 new Q.Uploader({	url:"api/upload.ashx",	target: element, //上传按钮	view: element, //上传任务视图 allows: ".jpg,.png,.gif,.bmp", //图片缩放 scale: { //要缩放的图片格式 types: ".jpg", //最大图片宽度(maxWidth)或高度(maxHeight) maxWidth: 1024 } }); 

###完整调用示例

new Q.Uploader({	//--------------- 必填 ---------------	url: "", //上传路径	target: element, //上传按钮	view: element, //上传任务视图(若自己实现UI接口,则无需指定此参数)	//--------------- 可选 ---------------	html5: true, //是否启用html5上传,若浏览器不支持,则自动禁用	multiple: true, //选择文件时是否允许多选,若浏览器不支持,则自动禁用(仅html5模式有效) clickTrigger:true, //是否启用click触发文件选择 eg: input.click() => ie9及以下不支持	auto: true, //添加任务后是否立即上传	data: {}, //上传文件的同时可以指定其它参数,该参数将以POST的方式提交到服务器	dataType: "json", //服务器返回值类型	workerThread: 1, //同时允许上传的任务数(仅html5模式有效)	upName: "upfile", //上传参数名称,若后台需要根据name来获取上传数据,可配置此项	allows: "", //允许上传的文件类型(扩展名),多个之间用逗号隔开	disallows: "", //禁止上传的文件类型(扩展名)	container:element, //一般无需指定	getPos:function, //一般无需指定	//上传回调事件(function)	on: {	init, //上传管理器初始化完毕后触发	select, //点击上传按钮准备选择上传文件之前触发,返回false可禁止选择文件	add, //添加任务之前触发,返回false将跳过该任务	upload, //上传任务之前触发,返回false将跳过该任务	send, //发送数据之前触发,返回false将跳过该任务	cancel, //取消上传任务后触发	remove, //移除上传任务后触发	progress, //上传进度发生变化后触发(仅html5模式有效)	complete //上传完成后触发	},	//UI接口(function),若指定了以下方法,将忽略默认实现	UI:{	init, //执行初始化操作	draw, //添加任务后绘制任务界面	update, //更新任务界面	over //任务上传完成	} }); 

说明:回调事件(add、upload、send)支持异步调用,只需在后面加上Async即可,比如在上传之前需要访问服务器验证数据,通过的就上传,否则跳过

on: {	uploadAsync: function (callback) { $.postJSON(url, function (json) { //若 json.ok 返回false,该任务不会上传 callback(json.ok); }); } } 

###手动操作(api)

var uploader = new Q.Uploader(ops); //上传任务列表,数组 uploader.list //当前上传任务索引 => var task = uploader.list[uploader.index]; uploader.index //添加上传任务,支持文件多选、input元素和文件对象 => input.files | input | file uploader.add(input_or_file); //批量添加上传任务 list => [input_or_file] uploader.addList(list); //手动开始上传(默认自动上传,实例化时可配置 ops.auto=false) uploader.start(); //上传一个任务 uploader.upload(task); //取消上传任务 uploader.cancel(taskId); //移除上传任务,会先调用 uploader.cancel(taskId) uploader.remove(taskId); //更新上传进度 //total : 总上传数据(byte) //loaded : 已上传数据(byte) uploader.progress(task, total, loaded); 

###自定义UI实现 可以在初始化时指定UI处理函数,亦可以通过扩展的方式实现

Uploader.extend({ //初始化操作,一般无需处理 init: function () { }, //绘制任务界面 draw: function (task) { //每个task就是一个上传任务,task一般有以下属性 /*task = { id, //任务编号 name, //上传文件名(包括扩展名) ext, //上传文件扩展名 size, //上传文件大小(单位:Byte,若获取不到大小,则值为-1) input, //上传控件 file, //上传数据(仅 html5) state, //上传状态	disabled, //若为true,表示禁止上传的文件	skip, //若为true,表示要跳过的任务	//上传后会有如下属性(由于浏览器支持问题,以下部分属性可能不存在)	xhr, //XMLHttpRequest对象(仅 html5)	total, //总上传大小(单位:Byte)	loaded, //已上传大小(单位:Byte)	speed, //上传速度(单位:Byte/s)	avgSpeed, //平均上传速度(仅上传完毕)	timeStart, //开始上传的时间	timeEnd, //结束上传的时间(仅上传完毕)	deleted, //若为true,表示已删除的文件	//文件成功上传	response, //服务器返回的字符串	json //response解析后的JSON对象(仅当 dataType 为json) };*/ }, //更新上传进度 update: function (task) { }, //上传完毕,一般无需处理 over: function () { } }); 

About

轻量级 web (html5 + html4) 文件上传组件,纯js,支持上传进度显示,支持图片预览及缩放,支持 IE6+、Firefox、Chrome等

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages

  • JavaScript 83.7%
  • HTML 12.5%
  • CSS 2.8%
  • Other 1.0%