jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法

前端技术 2023/09/05 JavaScript

前段时间介绍过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\': \'<?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(\"\' + json.fileId + \'\",\"<?php echo $d_upload_name_id;?>\",\"<?php echo $yt_upload_name_id;?>\")\">删除</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();//创建该对象
     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 错误的解决办法，希望大家喜欢。

本文地址：https://www.stayed.cn/item/12694

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案