jQuery Uploadify 上傳外掛程式出現Http Error 302 錯誤的解決方案

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

首先http 302是請求被重定向的意思，這就很容易理解了，如果你的uploadify處理上傳腳本有session驗證，就會出現此錯誤，因為flash在執行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': '<&#63;php echo session_id();&#63;>'}, 
    '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中程式碼如下：

$('#<&#63;php echo $upload_name_id;&#63;>').uploadify({
      'buttonText': '选择文件..',
      'fileObjName': 'imgFile',
      'method': 'post',
      'multi': false,
      'queueID': 'fileQueue',
      /*'uploadLimit': 2,*/
      'fileTypeExts': '*.gif;*.png;*.jpg;*.bmp;*.jpeg;',
      'buttonImage': '<&#63;php echo $this->_static_public&#63;>/js/uploadify/select.png',
      'formData': {
        'sessionId'  : '<&#63;php echo Yii::app()->session->sessionID; &#63;>',
        'timestamp'  : '<&#63;php echo time();&#63;>',
        'token'    : '<&#63;php echo md5('unique_salt'.time()); &#63;>',
        'modelName' : '<&#63;php echo $modelName; &#63;>',
        'modelId' : '<&#63;php echo $model->id; &#63;>'
      },
      'swf': '<&#63;php echo $this->_static_public;&#63;>/js/uploadify/uploadify.swf',
      'uploader': '<&#63;php echo $this->createUrl('uploadify/basicExecute')&#63;>',
      'onUploadStart': function () {
        $('#<&#63;php echo $up_upload_name_id;&#63;> img').remove();
        $('#<&#63;php echo $up_upload_name_id;&#63;> a').remove();
        $imgHtml = '<img class="upload_load" src="static/images/upload.gif" align="absmiddle" />';
        $('#<&#63;php echo $up_upload_name_id;&#63;>').append($imgHtml);
      },  
      'onUploadSuccess': function(file, data, response) {
        $('.upload_load').remove(); 
        var json = $.parseJSON(data); 
        if (json.state == 'success') {
          $("#<&#63;php echo $d_upload_name_id;&#63;>").remove();
          $(yt_upload_name_id).val(json.fileId);
          $imgHtml ='<div id="<&#63;php echo $d_upload_name_id;&#63;>">';          
          $imgHtml += '<a href="<&#63;php echo $this->_baseUrl&#63;>/' + json.file + '" target="_blank">';
          $imgHtml += '<img src="<&#63;php echo $this->_baseUrl&#63;>/'+json.file+'" width="85" height="75" align="absmiddle"/>';
          $imgHtml += '</a>';
          $imgHtml += '<a href="javascript:uploadifyRemove("' + json.fileId + '","<&#63;php echo $d_upload_name_id;&#63;>","<&#63;php echo $yt_upload_name_id;&#63;>")">删除</a>';
          $imgHtml +='</div>';
          $('#<&#63;php echo $up_upload_name_id;&#63;>').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();//创建该对象
     dff.setRepository(tmpDir);//指定上传文件的临时目录
     dff.setSizeThreshold(1024000);//指定在内存中缓存数据大小,单位为byte
     ServletFileUpload sfu = new ServletFileUpload(dff);//创建该对象
     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 錯誤的解決方法，希望大家喜歡。

jQuery Uploadify 上傳外掛程式出現Http Error 302 錯誤的解決方案_jquery