ThinkPHP 解決使用uploadify 在Firefox瀏覽器上傳圖片出現HTTP 302報錯

weixin_34320159發表於2017-07-04
PHPFirefox瀏覽器HTTP

Uploadify 引數說明

一、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">

最後就是在後臺處理上傳的檔案。。。。。。

二、出現的問題

1.由於jquery uploadify是藉助flash來實現上傳的，所以可能在瀏覽器禁止網站執行flash是會出現如下這個情況：

6673460-3cfdfc4d3213b8bb.png
6673460-f4a37afd09c16e0b.png
6673460-1fab6b28c3208e81.png

正常的情況：

6673460-d0f3c50666683c0f.png

2.Jquery Uploadify在IE瀏覽器可以正常上傳，在Chrome瀏覽器使用也是正常的，只有在Firefox瀏覽器使用才會出現HTTP 302報錯。

6673460-a8bc436eeb304231.png

在實現非同步上傳的時候，每一個檔案在上傳時都會提交給伺服器一個請求。每個請求都需要安全驗證，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瀏覽器去上傳圖片就成功了！

6673460-da94cf162de8ae9e.png

相關文章