Skip to content
forked from dsphper/lUpload

This is a chinese-made upload plug-ins

Notifications You must be signed in to change notification settings

djfyaci/lUpload

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 

Repository files navigation

##插件介绍 插件基于jQuery开发,可支持:

1.粘贴上传
2.拖拽上传
3.选择上传
4.实时上传速度
5.实时进度信息
7.可自定义不同文件类型上传缩略图
8.同步上传(阻塞式的文件会一个接一个的上传)
9.异步上传(和同步上传相反)
浏览器支持情况:
github logo

###DEMO 项目主页:http://dsphper.github.io/
演示Demo:http://1.luploaddemo.sinaapp.com/
###Document ####使用本插件您完全不需要有太多的JS相关知识,只需按照文档简单的书写相关调用函数即可,
##拖拽上传

##使用插件完全完全功能的实例:

// 说明 $('#drop').dropFile为拖拽上传 $('#drop').pasteFile为粘贴上传 $('#drop').selectFile 为选择上传
// 拖拽上传
var opts = {
url : '/lUpload/Demo/upload.php',
maxfiles: 111 , // 单次上传的数量
maxfilesize : 11,  // 单个文件允许的大小 (M)
multithreading : true, // true为同时上传false为队列上传
type : [], // 限制上传的类型
Knowntype : {'pdf':'./image/pdf.jpg', 'html':'./assets/image/html.png'}, // 自定义其他文件的缩略图
tpl : function(type) { // 自定义模板
	var imageTpl = '<li>\
		<div class="image">\
			<img src="./assets/image/aa.jpg" alt="">\
		</div>\
		<div class="uploadInfo">\
			<span class="fileName">文件名称: <text>ssad</text></span>\
			<span class="imageSize">图片尺寸: <text>ssad</text></span>\
			<span class="fileSize">文件大小: <text>ssad</text></span>\
			<span class="speed">上传速度: <text>ssad</text></span>\
			<span class="loaded">上传详情: <text>zzzz</text></span>\
			<span class="stage">\
				上传状态: <text>等待上传</text>\
			</span>\
			<div class="progress" style="display:none">\
				<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" id="progress">\
				    60%\
				  </div>\
			</div>\
		</div>\
	</li>';
	var otherTpl = '<li>\
		<div class="image">\
			<img src="./assets/image/aa.jpg" alt="">\
		</div>\
		<div class="uploadInfo">\
			<span class="fileName">文件名称: <text>ssad</text></span>\
			<span class="fileSize">文件大小: <text>ssad</text></span>\
			<span class="speed">上传速度: <text>ssad</text></span>\
			<span class="loaded">上传详情: <text>zzzz</text></span>\
			<span class="stage">\
				上传状态: <text>等待上传</text>\
			</span>\
			<div class="progress" style="display:none">\
				<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" id="progress">\
				    60%\
				  </div>\
			</div>\
		</div>\
	</li>';
	if(type == 'image') {
		return imageTpl;
	} else if(type == 'other') {
		return otherTpl;
	}
},
// result 结构 {thisDom: 当前被上传的节点, progress: 进度, speed: "网速", loaded: "已上传的大小 992 KB"}
dynamic : function(result) { // 返回网速及上传百分比
	result.thisDom.find('#progress').css('width', result.progress + '%').html(result.progress + '%');
	result.thisDom.find('.speed').text("网速:" + result.speed + " K\/S");
	result.thisDom.find('.loaded text').text(result.loaded + ' / ' + result.total);
},
complete : function(file) { // 上传完成后调用的
	var uList = $('#uList li').eq(file.index);
	uList.find('.stage text').html('上传完成!');
	// console.log('第' + file.index + '文件上传完成!');
},
stageChange : function(file) {
	var uList = $('#uList li').eq(file.index);
	uList.find('.progress').show();
	uList.find('.stage text').html('正在被上传');
	// console.log(file.index + '正在被上传');
} // 当开启队列上传时可以知道那个文件正在被上传
};
// 添加拖拽上传事件
$('#event').dropFile(opts);	
// 添加选择上传事件
$('#event #selectFile').selectFile(opts);
// 添加粘贴上传事件	
$('#event').pasteFile(opts);	

###版权 插件开源,所以您不需要得到作者的允许来使用。 但必须保留作者的版权信息。

About

This is a chinese-made upload plug-ins

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 45.9%
  • HTML 32.8%
  • CSS 17.8%
  • PHP 3.5%