1.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

Jquery多图片上传,图片批量上传插件,zyupload多图上传插件(不依赖Flash)

小川 前端
查看演示  

Jquery多图片上传,图片批量上传插件,zyupload多图上传插件(不依赖Flash)

这是一款基于HTML5的多文件上传插件,并且不依赖于Flash控件。

效果图:

001.jpg

002.jpg

005.jpg

使用说明都备注在源码,就不在细说了。


1、HTML部分(引入相关文件,定义容器):

<link rel="stylesheet" href="zyupload/skins/zyupload-1.0.0.css " type="text/css">
<script type="text/javascript" src="zyupload/zyupload-1.0.0.js"></script>


<div id="zyupload" class="zyupload"></div>

2、JQuery部分(调用插件,初始化插件):

<script type="text/javascript">
$(function(){
	// 初始化插件
	$("#zyupload").zyUpload({
		width            :   "680px",               // 宽度
		height           :   "400px",               // 宽度
		itemWidth        :   "140px",               // 文件项的宽度
		itemHeight       :   "115px",               // 文件项的高度
		url              :   "./upload.php",        // 上传文件的路径
		fileType         :   ["jpg","png","gif"],   // 上传文件的类型
		fileSize         :   51200000,              // 上传文件的大小
		multiple         :   true,                  // 是否可以多个文件上传
		dragDrop         :   true,                  // 是否可以拖动上传文件
		tailor           :   true,                  // 是否可以裁剪图片
		del              :   true,                  // 是否可以删除文件
		finishDel        :   false,  				// 是否在上传文件完成后删除预览
		/* 外部获得的回调接口 */
		// 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
		onSelect: function(selectFiles, allFiles){ 
			console.info("当前选择了以下文件:");
			console.info(selectFiles);
		},
		// 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
		onDelete: function(file, files){              
			console.info("当前删除了此文件:");
			console.info(file.name);
		},
		// 文件上传成功的回调方法
		onSuccess: function(file, response){          
			console.info("此文件上传成功:");
			console.info(file.name);
			console.info("此文件上传到服务器地址:");
			console.info(response);
			//$("#uploadInf").append("<p>请求成功,返回数据是:"+response+"</p>");
		},
		// 文件上传失败的回调方法
		onFailure: function(file, response){          
			console.info("此文件上传失败:");
			console.info(file.name);
		},
		// 上传完成的回调方法
		onComplete: function(response){           	  
			console.info("文件上传完成");
			console.info(response);
		}
	});
});
</script>

3、PHP部分(后台图片上传处理,数据处理):

<?php
date_default_timezone_set("Asia/Shanghai");
//   1、图片文件上传处理     (上传逻辑就自己写了。)
/*
	接收到$_FILES数据格式如下:
	'file'=>(
		'name'     => 'a1.jpg',
		'type'     => 'image/jpeg',
		'tmp_name' => 'C:\\Users\\Administrator\\AppData\\Local\\Temp\\1\\php5F5B.tmp',
		'error'    => 0,
		'size'     => 169891
	),
*/



//   2、返回值
// 假如这是上传成功后得到的文件名
$file = date("Ymd_").rand(1000,9999).'.jpg';
$res = array(
		'success' => rand(0,1),
		'file'    => $file
	);
die(json_encode($res));
?>


如果你还想了解更多请下载源码学习核心的JS文件。


 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
立即下载源码  
【温馨提示】源码包解压密码:www.youhutong.com
如果你觉得这篇教程的内容对你有帮助、请支持本站谢谢!  点击进入捐赠通道

转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/184.html

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情