ThinkPHP 解決使用uploadify 在Firefox瀏覽器上傳圖片出現HTTP 302報錯
一、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是會出現如下這個情況:
正常的情況:
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瀏覽器去上傳圖片就成功了!
相關文章
- uploadify圖片上傳控制元件在ie下報http406問題控制元件HTTP
- 在瀏覽器端用H5實現圖片壓縮上傳瀏覽器H5
- 織夢dedecms圖片集上傳圖片不能上傳 彈出提示302的解決方法
- 瀏覽器報圖片404錯誤,但是在路徑下明明存在該圖片(idel中專案做圖片上傳,上傳成功成功,路徑下真實存在,但是前端瀏覽器開啟就是報404)瀏覽器IDE前端
- 相容所有瀏覽器的圖片上傳本地預覽效果瀏覽器
- firefox瀏覽器開啟網頁報錯Firefox瀏覽器網頁
- 圖解電腦上Firefox瀏覽器無法開啟的解決辦法圖解Firefox瀏覽器
- laravel上傳圖片報錯Laravel
- Win10系統下ie瀏覽器上傳圖片失敗怎麼解決Win10瀏覽器
- chrome瀏覽器不能顯示本地圖片辦法解決(圖片預覽)Chrome瀏覽器地圖
- [BUG反饋]求解決 linux下 多圖上傳 在ie下可以 但是 在 谷歌下就會報錯出現302的錯誤資訊Linux谷歌
- js上傳圖片預覽,相容IE6以上各大主流瀏覽器JS瀏覽器
- 瀏覽器更新HTTP伺服器圖片並顯示瀏覽器HTTP伺服器
- Java上傳檔案到遠端伺服器和瀏覽器預覽圖片Java伺服器瀏覽器
- 圖片在瀏覽器上從http變成https問題的解決方案瀏覽器HTTP
- JXImageBrowser (圖片瀏覽器)瀏覽器
- JS相容各個瀏覽器的本地圖片上傳即時預覽效果JS瀏覽器地圖
- 上傳圖片和檔案出錯!!!
- [BUG反饋]剛剛下載的1.1版本,上傳圖片302 報錯
- Ueditor 上傳圖片自動新增水印(只能上傳圖片,上傳檔案報錯)
- 如何實現一個圖片瀏覽器瀏覽器
- FileReader初步使用實現上傳圖片預覽效果
- iOS圖片瀏覽器 - XLPhotoBrowser(類似微信多圖片瀏覽效果)iOS瀏覽器
- PbootCMS上傳圖片變模糊、上傳圖片尺寸受限的解決方案boot
- @Summer 解決下Safari瀏覽器任意圖片預覽一片模糊的bug瀏覽器
- 部分安卓手機微信瀏覽器中使用XMLHttpRequest 2上傳圖片顯示位元組數為0的解決辦法安卓瀏覽器XMLHTTP
- vue圖片預覽上傳Vue
- js圖片上傳預覽JS
- jQuery上傳外掛Uploadify使用詳解jQuery
- springboot部署在伺服器上使用圖片上傳功能隔一段時間就會報錯Spring Boot伺服器
- win10瀏覽器不能顯示圖片怎麼解決_win10瀏覽器圖片載入不出來怎麼辦Win10瀏覽器
- SSH三大框架使用谷歌瀏覽器上傳檔案瀏覽器崩潰框架谷歌瀏覽器
- jeecg使用uploadify上傳元件元件
- 直播電商平臺開發,釋出多圖片上傳到伺服器並實現圖片預覽功能伺服器
- 圖片上傳出錯--高手賜教!(謝謝)
- iSee Pro for Mac圖片瀏覽器Mac瀏覽器
- GraphicConverter for Mac(圖片瀏覽器)Mac瀏覽器
- 幻燈片式圖片瀏覽器瀏覽器