Js上传多张图片插件zyupload
最近做多图上传 找了好几个插件都不好用 可能是我不会用把 这个插件还是不错的 简单 明了
上代码 tp里面 改了下 demo 就可以用了
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zyupload拖拽功能上传实例</title>
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.js"></script>
<link rel="stylesheet" href="__PUBLIC__/plugin/zyupload/skins/zyupload-1.0.0.min.css " type="text/css">
<script type="text/javascript" src="__PUBLIC__/plugin/zyupload/zyupload.drag-1.0.0.min.js"></script>
</head>
<body>
<h1 style="text-align:center;">zyupload拖拽功能上传实例</h1>
<div style="position: absolute;top: 100px; left: 20px;">
<h3>功能页面向导：</h3>
<a style="color: #333;line-height: 30px;" href="demo.html">zyupload全部功能</a><br/>
<a style="color: #333;line-height: 30px;" href="demo.basic.html">zyupload基本功能</a><br/>
<a style="color: #333;line-height: 30px;" href="demo.tailor.html">zyupload裁剪功能</a><br/>
</div>
<div id="zyupload" class="zyupload"></div>
<div id="uploadInf"></div>
<div id="img"><img src="/uploads/1234.png" /></div>
<script type="text/javascript">
$(function(){
// 初始化插件
$("#zyupload").zyUpload({
width : "650px", // 宽度
height : "400px", // 宽度
itemWidth : "140px", // 文件项的宽度
itemHeight : "115px", // 文件项的高度
url : "upload.html", // 上传文件的路径
fileType : ["jpg","png","js","exe"],// 上传文件的类型
fileSize : 51200000, // 上传文件的大小
multiple : true, // 是否可以多个文件上传
dragDrop : true, // 是否可以拖动上传文件
tailor : false, // 是否可以裁剪图片
del : true, // 是否可以删除文件
finishDel : false, // 是否在上传文件完成后删除预览
/* 外部获得的回调接口 */
onSelect: function(selectFiles, allFiles){ // 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件
console.info("当前选择了以下文件：");
console.info(selectFiles);
},
onDelete: function(file, files){ // 删除一个文件的回调方法 file:当前删除的文件 files:删除之后的文件
console.info("当前删除了此文件：");
console.info(file.name);
},
onSuccess: function(file, response){ // 文件上传成功的回调方法
console.info("此文件上传成功：");
console.info(file.name);
console.info("此文件上传到服务器地址：");
console.info(response);
response = $.parseJSON(response);
$("#uploadInf").append(response.msg+"<p>上传成功，文件地址是：" + response.dir + "</p>");
$('#img').append("<img src='"+response.dir+"' />");
},
onFailure: function(file, response){ // 文件上传失败的回调方法
console.info("此文件上传失败：");
console.info(file.name);
},
onComplete: function(response){ // 上传完成的回调方法
console.info("文件上传完成");
console.info(response.msg);
}
});
});
</script>
</body>
</html>
上传到 upload方法里
PHP:
public function upload(){
$uploaddir = 'uploads/';
$uploadfile = $uploaddir. $_FILES['file']['name'];
$info=pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
$dir=$uploaddir .date('YmdHis').rand(1,10000).'.'.$info;
if (move_uploaded_file($_FILES['file']['tmp_name'],$dir )) {
/*print "File is valid, and was successfully uploaded. Here's some more debugging info:\n";*/
$re['dir']='/'.$dir;
$re['msg']="上传成功";
$re['status']=200;
echo json_encode($re);
} else {
/*print "Possible file upload attack! Here's some debugging info:\n";
print_r($_FILES);*/
$re['msg']="上传成功";
echo json_encode($re);
}
}
上传到了 根目录的upload文件夹下
补充最最最重要的一点 返回值 $re['status']=200; 必须返回个状态码 这个坑我踩了一天 还是看插件源码看到的。。。。
链接：http://pan.baidu.com/s/1slo1mgt 密码：qf19
参考：http://www.07net01.com/2015/12/1018133.html
