HTML中:
<style>
#img_upload-queue{width:120px;float:left;} /*uploadify的上傳進度條樣式,前面的img_upload是根據上傳按鈕的ID來的*/
</style>javascript
//須要引入這3個JS文件
<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>
<link rel="stylesheet" href="__PUBLIC__/uploadify/uploadify.css">
<script src="__PUBLIC__/uploadify/jquery.uploadify.min.js"></script>
<script>
$(function() {
$('#img_upload').uploadify({ //經過ID來調用uplodify
'swf' : '__PUBLIC__/uploadify/uploadify.swf', //必須載入uplodify.swf文件
'uploader' : "<{:U('Product/uploadify')}>", //上傳提交控制器地址
'buttonText' : '縮略圖上傳', //上傳按鈕顯示的文字
'onUploadSuccess' : function(file, data, response) { //上傳回調
$('#img').attr('src','__ROOT__/Upload/thumb/'+ data); //將返回的地址拼接成圖片路徑,顯示縮略圖
$('#thumb').val(data); //將返回的地址加載到input中
},
//這裏的formData主要是解決FF沒法經過flash傳session的問題,uplodify是經過flash上傳的
'formData' : { //經過formData日後臺傳遞參數,POST方式;uploadify在FF裏上傳的時候會丟失session,因爲控制器中經過session判 斷了登陸,因此致使上傳失敗,返回302錯誤,所以須要從新傳遞session內容過去,並在控制器從新組合session
'sid' : '<{:session_id()}>', //傳遞SESSIONID
'sname' : '<{:session("username")}>', //傳遞username
'sid' : '<{:session("uid")}>' //傳遞uid
}
});
});
</script>css
//HTML中插入uplodify上傳控件
<td>
<div><input id="thumb" type="text" style="float:left;margin:35px 20px 0 0;" /></div>
<div style="float:left;margin:30px 20px 0 0;"><input id="img_upload" name="img_upload" type="file" multiple="true" value="" style="float:left" /></div>
<div><img id="img" src="" style="width:100px;height:100px;background:#666;" /></div>
</td>java
PHP中jquery
//公共控制器,用來驗證是否登陸等
class CommonController extends Controller{
public function _initialize(){
//此處爲解決Uploadify,kindeditor等flash上傳在火狐下上傳失敗,從新設置SESSION
if ($_POST['sid']) { //接收自定義傳入的內容,而後手動寫入session
session_id($_POST['sid']);
session_start();
session('username',$_POST['sname']); //手動寫入session的username,不然下面的判斷通不過,則因爲沒登陸致使上傳失敗
session('id',$_POST['suid']);
}
if(!$_SESSION['username']){
$this->redirect('Login/index');
}
}
}session
//uplodify文件上傳
public function uploadify(){
$config = array(
'maxSize' => 1000000, //上傳文件的最大值
'exts' => array('jpeg','jpg','png','gif'), //容許上傳的文件後綴 留空不做後綴檢查
'autoSub' => true, // 啓用子目錄保存文件
'subName' => array('date','Ymd'), // 子目錄建立方式 可使用hash date custom
'rootPath' => './Upload/thumb/', //保存根路徑
'savePath' => '', //上傳文件保存路徑
);
$upload = new \Think\Upload($config);
$info=$upload->upload();
if($info){
echo $info['Filedata']['savepath'].$info['Filedata']['savename']; //拼接出地址直接echo返回
}else{ //若是上傳失敗,則輸出錯誤信息
echo $upload->getError();
}
}ui