关于 pluplod 插件 结合thinkphp上传图片的功能
看前端代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Plupload - Queue widget example</title>
<link rel="stylesheet" href="__PUBLIC__/index/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css" media="screen" />
</head>
<body >
<form method="post" action="{:U('Index/Qiniu/form')}" id='f11' enctype="multipart/form-data">
<div >
<div id="flash_uploader" >请引用plupload文件夹里面的Moxie.swf</div>
</div>
<div id="aaaa"></div>
<input type="submit" value="Send" />
</form>
<script src="__PUBLIC__/index/js/jquery-1.10.1.min.js"></script>
<!--引入核心文件 S-->
<script type="text/javascript" src="__PUBLIC__/index/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/index/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<!--引入核心文件 E-->
<script src="__PUBLIC__/index/plupload/js/i18n/zh_CN.js"></script><!--引入中文包-->
<!-- debug
<script type="text/javascript" src="__PUBLIC__/plupload/js/moxie.js"></script>
<script type="text/javascript" src="__PUBLIC__/plupload/js/plupload.dev.js"></script>
<script type="text/javascript" src="__PUBLIC__/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
-->
<script type="text/javascript">
$(function() {
// Setup flash version
$("#flash_uploader").pluploadQueue({
// General settings
runtimes : 'html5,flash,silverlight,html4',//指定上传方式
url : "{:U('Index/Qiniu/upload')}",//后台url
chunk_size : '4mb',//分片大小
unique_names : true,//文件名是否唯一
multiple:true,
filters : {
max_file_size : '12mb', //最大只能上传1mb的文件
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"}, //限制上传类型
],
prevent_duplicates:true, //是否选取重复的文件
},
//压缩设置
resize: {
width: 100,
height: 100,
crop: true, //是否裁剪图片
quality: 60,
preserve_headers: false//：压缩后是否保留图片的元数据，true为保留，false为不保留,默认为true。
},
init:{
FileUploaded:function(up,file,info)
{
var response = $.parseJSON(info.response);
//console.info(response);//调试信息 打印自己看
//console.info(up);//调试信息 打印自己看
//console.info(file);//调试信息 打印自己看
//console.info(info);//调试信息 打印自己看
if (info.status) {
$('#aaaa').append('文件路径:<input type="hidden" name="fileUrl[]" value="'+response+'"/></br>');
//这块代码很关键 用于当上传完一个文件后 继续显示添加文件和开始上传按钮
if(up.total.uploaded==up.files.length)
{
$(".plupload_buttons").css("display","inline");
$(".plupload_upload_status").css("display","inline");
$(".pluploaded_start").addClass("plupload_disabled");
}
up.disableBrowse(false);
}},
FilesAdded: function (up, files) {
//文件上传数量限制
$.each(up.files, function (i, file) {
//console.info(up.files.length);
if (up.files.length >2) {
up.splice(2, up.files.length-2);
// up.stop();
alert('只能上传两个文件');
return false;
}
});
},
UploadComplete:function(up,files)
{
up.refresh();
},
QueueChanged:function(up)
{
$(".plupload_start").removeClass("plupload_disabled");
}
},
// Flash settings
flash_swf_url : '__PUBLIC__/index/plupload/js/Moxie.swf',
silverlight_xap_url : '__PUBLIC__/index/plupload/js/Moxie.xap'
});
});
</script>
</body>
</html>
看后端代码
<?php
/**
* 七牛云储存 测试文件
* @author Administrator
*
*/
class QiniuAction extends Action{
public function index(){
$this->display('Plupload');
}
/**
* 上传文件 plupload js插件
*/
public function upload()
{
import('ORG.Net.UploadFile');
$upload = new UploadFile();// 实例化上传类
$rdate=date("Ymd",time()); //文件名
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->savePath = C('IMG_UPLOADS').'fg/'.$rdate.'/';// 设置附件上传目录
// 上传文件
$info = $upload->upload();
if(!$info) {
// 上传错误提示错误信息
$this->error($upload->getError());
}else
{
// 上传成功
echo json_encode($info['file']['savepath'].$info['file']['savename']);
}
}
//后台处理数据
public function form()
{
dump($_POST);
}
}
?>
我这个代码是结合thinkphp3.1框架，所以使用的时候请注意；
其实这个代码是一个朋友在thinkphp发布过，我只是修改了一下，适应我的框架代码，感谢 梦之翼（http://2262805.blog.51cto.com）