Solution to Http Error 302 error in jQuery Uploadify upload plug-in_jquery

I introduced how to use the jquery uploadify upload plug-in some time ago. I encountered the Http Error 302 error problem during use. Many people should have encountered it during use. I will record it here:

First of all, http 302 means that the request has been redirected, which is easy to understand. If your uploadify processing upload script has session verification, this error will occur because flash does not include cookie information when executing the post request. , and the server's session will get the SESSIONID based on the client's cookie. Naturally, the session cannot be obtained without submitting the cookie, and uploadify returns a 302 (request redirected) error.

The solution is of course to pass the value of session_id to the server:

<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> 

Then before server-side session verification:

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

Of course, you can also directly pass the session id in the URL.

The code in yii is as follows:

$('#<&#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();
      }
    }); 

Server:

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

ps: jquery upload plug-in uploadify usage experience (summary)

Use it yourself:

1. jsp page:

<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. Server code

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();
 }}

The above content is the solution to the Http Error 302 error in the jQuery Uploadify upload plug-in introduced by the editor. I hope you like it.