溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
關于 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）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
