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

jQuery图片批量上传插件,多图上传插件(案例教程)

小川 特效组件
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

jQuery图片批量上传插件,多图上传插件(案例教程)

1、批量选择+指量上传

2、在线排序编辑

3、在线删除图片(支持同时删除服务器上的图片)

4、上传进度条显示

5、无需Flash

效果图:

001.jpg

1、html部分:

<link href="css/upload.css" rel="stylesheet">
<div id="xc_upload"></div>

2、jQuery部分:

<script src="js/youhutong_upload.js"></script>
<script type="text/javascript">
$(function() {
	var md = "product";
	var pid = "asdasdasdasdasd";
	$.Tupload.init({
		url     : "./upload.php?md=" + md + "&pid=" + pid,
		title   : "大小不能超过500kb,避免图片上传出现问题,请尽量选择完毕图片后再上传",
		fileNum : 10,                        // 上传文件数量
		divId   : "xc_upload",               // div  id
		accept  : "image/jpeg,image/x-png",  // 上传文件的类型限制
		fileSize: 51200000,                  // 上传文件的大小限制
		// 上传成功
		onSuccess: function(obj, i) {
			var data =eval('(' + obj.currentTarget.response + ')');
			if(data.file != '' || data.file != undefined){
				$("#image_value"+i).attr('value',data.file);
			}
		},
		// 删除图片
		onDelete: function(i) {
			var val = $("#image_value"+i).attr("value");
			$("#image_value"+i).attr("value","");
			/*  如果已经上传到服务器  可通过这来一起删除服务器的文件
			if(val != '' && val != undefined){
				var md = "product";
				$.ajax({
					type:"POST",
					url: "base/delPic" ,
					data : {val:val, id:pid, md:md},
					success: function(rel){}
				});
			}*/
		}
	});
})
</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' => true,
		'file'    => $file
	);
die(json_encode($res));


?>


想要了解更多的方法,请下载源码学习研究(youhutong_upload.js文件)


 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com
升级为VIP会员,有效期内免费下载本站所有VIP源码  点击升级为VIP

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

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