一、uploadify使用詳解
1.在html中的file标簽可以用來上傳檔案,但是在檔案較大或者多檔案上傳的時候,file标簽就不太适合了。而uploadify插件是基于js的jquery庫寫的,結合ajax和flash,實作多檔案上傳功能。
2.主要檔案:
jquery.uploadify.js (主要插件)
jquery-1.7.2.min.js (jquery主件)
uploadify.swf (flash上傳插件)
uploadify.css (上傳樣式表)
uploadify-cancel.png (flash上傳按鈕圖示)
uploadify.php (上傳處理資料)
uploads檔案夾 (預設儲存上傳檔案目錄)
3.在上傳的頁面引入js/css檔案,然後初始化一些參數變量
$(function () {
$('#file_upload').uploadify({
buttonText:'選擇檔案',
swf: '{$smarty.const.SITE_PUBLIC_URL}Admin/uploadify/uploadify.swf',
uploader: '{$smarty.const.__CONTROLLER__}/Upload',
method:'get',
onSWFReady:function(){
$('#file_upload').uploadify('disable', true);
},
onUploadStart:function(file){
var spot=$('#spot').val();
var coid={$arrData['coid']};
var session_id={$smarty.session.session_id};
$("#file_upload").uploadify("settings", "formData", { 'spot' : spot,'coid':coid,'session_id':session_id});
},
onUploadSuccess:function(file, data, response){
}
});
});
接着就是在body裡面添加調用标簽
<p><i>多圖上傳<span class="must">*</span></i></p>
<br><br>
<input id="file_upload" name="file_upload" type="file" multiple="true">
最後就是在背景處理上傳的檔案。。。。。。
Uploadify 參數說明:http://www.cnblogs.com/yangy608/p/3915349.html
二、出現的問題
1.由于jquery uploadify是借助flash來實作上傳的,是以可能在浏覽器禁止網站運作flash是會出現如下這個情況:
這時就要去浏覽器設定,
正常的情況:
2.Jquery Uploadify在IE浏覽器可以正常上傳,在Chrome浏覽器使用也是正常的,隻有在Firefox浏覽器使用才會出現HTTP 302報錯。
在實作異步上傳的時候,每一個檔案在上傳時都會送出給伺服器一個請求。每個請求都需要安全驗證,session和cookie的校驗。由于jquery uploadify是借助flash來實作上傳的,每一次向背景發送資料流請求時,IE會自動把本地cookie存儲捆綁在一起發送給伺服器。但是firefox不會這樣做,是以在進行驗證登入的時候就出現了HTTP 302 報錯。如果把這個子產品放在不需要驗證的地方是不會出現這種報錯的。
Session又稱為會話狀态,是Web系統中最常用的狀态,用于維護和目前浏覽器執行個體相關的一些資訊。Session對于每一個用戶端是不一樣的,使用者首次與Web伺服器建立連接配接的時候,伺服器會給使用者分發一個 SessionID作為辨別。SessionID是一個由24個字元組成的随機字元串。使用者每次送出頁面,浏覽器都會把這個SessionID包含在 HTTP頭中送出給Web伺服器,這樣Web伺服器就能區分目前請求頁面的是哪一個用戶端。
三.解決問題
1.解決方案一:
在插件初始化的時候,把本地記錄下來的session值,以及身份驗證值傳給初始化方法,進行參數指派,這樣,每次異步請求上傳檔案的時候,相應的 session值就包含在請求檔案中了。
onUploadStart:function(file){
var spot=$('#spot').val();
var coid={$arrData['coid']};
var session_id={$smarty.session.session_id};
$("#file_upload").uploadify("settings", "formData", {'spot' : spot,'coid':coid,'session_id':session_id});
},
伺服器端(ThinkPHP控制器)代碼
public function _initialize(){
//此處為解決Uploadify在火狐下出現http 302錯誤 重新設定SESSION
$session_name= session_name();
if(isset($_GET['session_id']))
{
session_id($_GET['session_id']);
session_start();
}
//執行登陸驗證檢測函數
$this->powerverify();
}
2.解決方案二:
onUploadStart:function(file){
var spot=$('#spot').val();
var coid={$arrData['coid']};
var session_id={$smarty.session.session_id};
$("#file_upload").uploadify("settings", "formData", {'spot' : spot,'coid':coid,'session_id':session_id});
},
伺服器端(ThinkPHP控制器)代碼
在核心類檔案夾裡下的Conf/convention.PHP中 将 VAR_SESSION_ID打開(建議在子產品的conf檔案中添加配置,如在子產品下的Conf/config.php中添加 ‘VAR_SESSION_ID’ => ‘session_id’,)
<?php
return array(
'VAR_SESSION_ID' => 'session_id',//sessionID的送出變量
);
在解決了問題之後,我再上Firefox浏覽器去上傳圖檔就成功了!