jQuery Uploadify 上傳插件出現Http Error 302 錯誤的解決辦法

更新時間：2015年12月12日 09:46:50 作者：jerrylsxu

本文給大家介紹jQuery Uploadify 上傳插件出現Http Error 302 錯誤的解決辦法，涉及到uploadify上傳錯誤302相關問題，對本文感興趣的朋友一起看看吧

前段時間介紹過jquery uploadify上傳插件的使用方法，我在使用中遇到過Http Error 302錯誤問題，應該會有很多人在使用中遇到過，在此記錄下來：

首先http 302是請求被重定向的意思，這就很容易理解了，如果你的uploadify處理上傳腳本有session驗證，就會出現此錯誤，因為flash在執(zhí)行post請求的時候沒有包含cookie信息，而服務器的session會根據客戶端的cookie來得到SESSIONID。沒有提交cookie自然就不能獲取到session，然后uploadify就返回了302(請求被重定向)的錯誤。

解決辦法當然是把session_id的值傳到服務端：

<script>
$(document).ready(function() { 
   $('#file_upload').uploadify({ 
    'uploader' : 'uploadify/uploadify.swf', 
    'script'  : 'uploadify.php',
    'folder'  : 'uploads/file', 
    'formData': { 'session': '<?php echo session_id();?>'}, 
    'onComplete' : function(event, ID, fileObj, response, data) { 
     alert(response); 
    } 
   }); 
}); 
</script>

然后在服務器端session驗證之前：

if (isset($_POST['session'])){ 
  session_id($_POST['session']); 
  session_start();//注意此函數要在session_id之后 
}

當然，你也可以直接在url中將session id傳過去。

yii中代碼如下：

$('#<?php echo $upload_name_id;?>').uploadify({
      'buttonText': '選擇文件..',
      'fileObjName': 'imgFile',
      'method': 'post',
      'multi': false,
      'queueID': 'fileQueue',
      /*'uploadLimit': 2,*/
      'fileTypeExts': '*.gif;*.png;*.jpg;*.bmp;*.jpeg;',
      'buttonImage': '<?php echo $this->_static_public?>/js/uploadify/select.png',
      'formData': {
        'sessionId'  : '<?php echo Yii::app()->session->sessionID; ?>',
        'timestamp'  : '<?php echo time();?>',
        'token'    : '<?php echo md5('unique_salt'.time()); ?>',
        'modelName' : '<?php echo $modelName; ?>',
        'modelId' : '<?php echo $model->id; ?>'
      },
      'swf': '<?php echo $this->_static_public;?>/js/uploadify/uploadify.swf',
      'uploader': '<?php echo $this->createUrl('uploadify/basicExecute')?>',
      'onUploadStart': function () {
        $('#<?php echo $up_upload_name_id;?> img').remove();
        $('#<?php echo $up_upload_name_id;?> a').remove();
        $imgHtml = '<img class="upload_load" src="static/images/upload.gif" align="absmiddle" />';
        $('#<?php echo $up_upload_name_id;?>').append($imgHtml);
      },  
      'onUploadSuccess': function(file, data, response) {
        $('.upload_load').remove(); 
        var json = $.parseJSON(data); 
        if (json.state == 'success') {
          $("#<?php echo $d_upload_name_id;?>").remove();
          $(yt_upload_name_id).val(json.fileId);
          $imgHtml ='<div id="<?php echo $d_upload_name_id;?>">';          
          $imgHtml += '<a href="<?php echo $this->_baseUrl?>/' + json.file + '" target="_blank">';
          $imgHtml += '<img src="<?php echo $this->_baseUrl?>/'+json.file+'" width="85" height="75" align="absmiddle"/>';
          $imgHtml += '</a>';
          $imgHtml += '<a href="javascript:uploadifyRemove(&quot;' + json.fileId + '&quot;,&quot;<?php echo $d_upload_name_id;?>&quot;,&quot;<?php echo $yt_upload_name_id;?>&quot;)">刪除</a>';
          $imgHtml +='</div>';
          $('#<?php echo $up_upload_name_id;?>').append($imgHtml);
        } else {
          alert(json.message);
        }
      },
      'onQueueComplete':function () {
        $('.upload_load').remove();
      }
    });

服務端：

if (isset($_POST['sessionId'])) {
  $session = Yii::app()->getSession();
  $session->close();
  $session->sessionID = $_POST['sessionId'];
  $session->open();
}

ps：jquery上傳插件uploadify使用心得(總結)

自己使用實例：

1、jsp頁面：

<link href="jsp/js/jquery_upload/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsp/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jsp/js/jquery_upload/swfobject.js"></script>
<script type="text/javascript" src="jsp/js/jquery_upload/jquery.uploadify.v2.1.4.min.js"></script>
//jquery文件上傳
$(document).ready(function()
    {
      $("#uploadify").uploadify({
        'uploader': 'jsp/js/jquery_upload/uploadify.swf',
        'script': 'uploadFile.svl',
        'cancelImg': 'jsp/js/jquery_upload/cancel.png',
        'queueID': 'fileQueue',
        'auto': false,
        'multi': true,
        'method':'POST',
        'scriptData':{'saveFolder':'stuPhotos'},//GET方式才可生效
        'fileExt' :'*.jpg;*.gif;*.png', //控制可上傳文件的擴展名
        'fileDesc': 'jpg、gif、png文件', //控制可上傳文件的擴展名描述，兩者需要同時使用 
        'buttonImg':'jsp/js/jquery_upload/selectBtn.gif',
        'width':80,//"瀏覽"按鈕寬度
        'onComplete':function(event,ID,fileObj,response,data){
         //alert(response) //response為服務器響應數據
        },
      });
}); 
<td width="200" class="tabIndex" style="height:10px">照片：</td>
<td>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()">上傳</a>| 
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上傳</a>
</p>
<div id="fileQueue" ></div>
<input type="hidden" name="stuPhoto" id="stuPhoto" />
</td>

2、服務端代碼

public class UploadFileUtil extends HttpServlet {
private static final long serialVersionUID = 1L;
File tmpDir = null;// 初始化上傳文件的臨時存放目錄
File saveDir = null;// 初始化上傳文件后的保存目錄
public UploadFileUtil() {
super();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  try{
    if(ServletFileUpload.isMultipartContent(request)){
     response.setCharacterEncoding("utf-8");//務必，防止返回文件名是亂碼 
     DiskFileItemFactory dff = new DiskFileItemFactory();//創(chuàng)建該對象
     dff.setRepository(tmpDir);//指定上傳文件的臨時目錄
     dff.setSizeThreshold(1024000);//指定在內存中緩存數據大小,單位為byte
     ServletFileUpload sfu = new ServletFileUpload(dff);//創(chuàng)建該對象
     sfu.setFileSizeMax(5000000);//指定單個上傳文件的最大尺寸
     sfu.setSizeMax(10000000);//指定一次上傳多個文件的總尺寸
     FileItemIterator fii = sfu.getItemIterator(request);//解析request 請求,并返回FileItemIterator集合
     while(fii.hasNext()){
      FileItemStream fis = fii.next();//從集合中獲得一個文件流
      if(!fis.isFormField() && fis.getName().length()>0){//過濾掉表單中非文件域
       String fileName = fis.getName();//獲取文件名
       String extName = "";
       if (fileName.lastIndexOf(".") >= 0) {
extName = fileName.substring(fileName.lastIndexOf("."));
}
        BufferedInputStream in = new BufferedInputStream(fis.openStream());//獲得文件輸入流
        String uuidName = UUID.randomUUID().toString().replaceAll("-", "").toUpperCase();//用UUID生成文件名
        BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(new File(saveDir+"/"+uuidName+extName)));//獲得文件輸出流
        Streams.copy(in, out, true);//開始把文件寫到你指定的上傳文件夾
      }
     }
     //jquery上傳方式返回
     response.getWriter().print("upload success");//成功
    }
  }catch(Exception e){
   response.getWriter().print("upload fail");//失敗
    e.printStackTrace();
  }
 } public void init() throws ServletException {
  super.init();
  String serverPath = this.getServletConfig().getServletContext().getRealPath("/");//獲取服務器路徑
   String tmpPath = serverPath+"/tmpUploadsFolder/";
   String savePath = serverPath+"/uploadsFolder/";
  tmpDir = new File(tmpPath);
  saveDir = new File(savePath);
  if(!tmpDir.isDirectory())
    tmpDir.mkdir();
  if(!saveDir.isDirectory())
    saveDir.mkdir();
 }}

以上內容是小編給大家介紹的jQuery Uploadify 上傳插件出現Http Error 302 錯誤的解決辦法，希望大家喜歡。

您可能感興趣的文章: