雨润心灵，哲思天下

nginx session不生效和不支持静态POST上传的问题

linux运维    Sep-3-2010

五周年，纪念一下

生活也很精彩    Apr-9-2010

firefox云输入法扩展（更新至1.2版本）

firefoxe扩展开发    Jan-19-2010

google chrome扩展开发介绍

google chrome扩展开发    Nov-25-2009

firefox扩展开发点滴：获取xul元素坐标位置

firefoxe扩展开发    Nov-20-2009

亲爱的潇，生日快乐！

生活也很精彩    Nov-15-2009

让浏览器支持xpi类型文件的下载

firefoxe扩展开发    Nov-6-2009

firefox扩展开发简介

互联网新闻    Nov-2-2009

[zz]输入法破局研究——联盟推广

mysql, 互联网新闻    Oct-27-2009

jQuery插件之让AjaxFileUpload支持多文件上传

roby on 08月 - 24 - 2009

AjaxFileUpload是一个基于jquery开发的文件上传插件，之前有写过一篇使用方面的文章，颇受欢迎，后因业务需要，需要在一个页面上传多个文件，这才意识到AjaxFileUpload只是支持单文件的，那么改造一下吧，使其支持多文件上传（只做比较简单的示例，您完全可以将其改造得更为强大）。另外对于AjaxFileUpload的基本使用和需要注意的问题请参考文章：jquery插件之AjaxFileUpload

  1. <input id="thumbnail" class="upfileText" name="thumbnail" size="30" type="file" />
  2. <input id="buttonUpload0" class="button" onclick="return ajaxFileUpload(this);" type="button" value="上传" />

做一个“添加”按钮

  1. <div id="add_seriesArea"><input id="add_series" class="button" type="button" value="添加" /></div>

为该按钮绑定click事件：

下载: samplecode.txt
  1. function add_seriesInit(){
  2.  var thumbStr = '<div class="thumbArea"><label class="label">缩略图片：</label><input id="thumbnail&" name="thumbnail&" class="upfileText" type="file" size="30" /><input id="buttonUpload&" class="button" onclick="return ajaxFileUpload(this);" type="button" value="上传" /></div>';
  3.  
  4. $("#add_series").click(function(){
  5.   series_c++;
  6.   $("#add_seriesArea").before((thumbStr+hoverStr).replace(/&/g,series_c));
  7.  });
  8. };

以上代码中，细心的你应该发现了其实就是通过一个添加按钮来生成多个上传文件的文件选择框和上传按钮，并且将原来的id=“buttonUpload” 和id=“thumbnail”替换成了buttonUpload0 buttonUpload1、thumbnail0、thumbnail1等系列值，为的是id不重复。同样的对ajaxFileUpload执行函数以及后台代码都要作修改。
改进后的php后台代码：

下载: ajaxfileupload_new.txt
  1. //和作者提供的源代码不同，返回的是一个json格式的消息，SITE_ROOT是全局变量，定义的站点根目录
  2.     $error = "";
  3.     $msg = "";
  4.     //$fileElementName 不再是写死的，需要从前台传入，以区别不同的file对象
  5.     $fileElementName = $_GET["fileElementId"];
  6.     if(!empty($_FILES[$fileElementName]['error']))
  7.     {
  8.         switch($_FILES[$fileElementName]['error'])
  9.         {
  10.             case '1':
  11.                 $error = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
  12.                 break;
  13.             case '2':
  14.                 $error = 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form';
  15.                 break;
  16.             case '3':
  17.                 $error = 'The uploaded file was only partially uploaded';
  18.                 break;
  19.             case '4':
  20.                 $error = 'No file was uploaded.';
  21.                 break;
  22.             case '6':
  23.                 $error = 'Missing a temporary folder';
  24.                 break;
  25.             case '7':
  26.                 $error = 'Failed to write file to disk';
  27.                 break;
  28.             case '8':
  29.                 $error = 'File upload stopped by extension';
  30.                 break;
  31.             case '999':
  32.             default:
  33.                 $error = 'No error code avaiable';
  34.         }
  35.     }
  36.     elseif(empty($_FILES[$fileElementName]['tmp_name']) || $_FILES[$fileElementName]['tmp_name'] == 'none')
  37.     {
  38.         $error = 'No file was uploaded..';
  39.     }
  40.     else
  41.     {
  42.         $dir = SITE_ROOT . "/upload_images/";
  43.         $tstamp = strval(time()).strval(rand(100,999));
  44.         $fname = $tstamp.substr($_FILES[$fileElementName]['name'],strrpos($_FILES[$fileElementName]['name'],"."));
  45.         $msg = $fname;
  46.         $f=$dir.$fname;
  47.         if(strpos($fileElementName,"thumbnail") != false){
  48.             if($_FILES[$fileElementName]['size']/1024 > 100){
  49.                 $msg = $fileElementName."overmaxsize";
  50.             }
  51.         }
  52.         else{
  53.             if(!move_uploaded_file($_FILES[$fileElementName]['tmp_name'],$f))
  54.             {
  55.                 $error = "failed";
  56.                 $msg = "move file failed";
  57.             }
  58.             else{
  59.                 $size = getimagesize($f);
  60.                 $width = $size[0];
  61.                 $height = $size[1];
  62.                 if($width == "" && $height == ""){
  63.                     $error = "failed";
  64.                     $msg = "上传的图片不符合格式要求";
  65.                 }
  66.             }
  67.         }
  68.     }
  69.     echo "{";
  70.     echo                "error: '" . $error . "',\n";
  71.     echo                "msg: '" . $msg . "',\n";
  72.     echo                "width: '" . $width . "',\n";
  73.     echo                "height: '" . $height . "'\n";
  74.     echo "}";

以上就是改造的核心内容，当然，你还可以根据自己的需求随心所欲的加以改变，上面的思路就是参数化写死的变量，多个值换以数组的方式来保存，多文件上传还会遇到一些诸如文件顺序的问题，会使问题复杂化，至于如何处理，主要看需求吧。

categories: javascript
Tags: , ,

No Comments for this post

还没有评论。

Leave a comment

Name (required) Comment
Mail (required)
Website