【http://www.cnblogs.com/Zjmainstay/archive/2012/08/09/jQuery_upload_image.html】

 

最近看了一些jQuery即时上传的插件，总算看懂了些门路。现将其最为核心的一部分抽取出来，以期用最简单的例子来说明jQuery图片即时上传的原理。

　　首先本用例一共包含3个文件:

　　　　1、上传面板HTML文件。

　　　　2、上传处理PHP文件。

　　　　3、jQuery库。

　　第一、上传面板HTML文件（index.html)。

           其主要包含了jQuery库、即时上传所需js、表单和iframe框架。下面是其源码，其中已附详细注释。

1  2  3  4      5     
      6     
      7     
         
      8      9 10 11 16 33 
     
      34     
              
      35 
     
36     
     37 
     
    
     38 39 

　　 第二、上传处理PHP文件(submit_form_process.php)。

　　　　其主要包含了图片文件的简单上传，及返回图片标签<img>，其中存储刚上传的图片。下面是其源码。

1 
     标签6     echo "<img src='{$_FILES['upload_file']['name']}'/>";7 //End_php

 　　总结之原理透析：

　　　　讲到jQuery即时上传，不知道其原理的人第一想法一般都是使用AJAX（补注：当时不知道有FormData对象），我也尝试过。但是，由于上传文件不同于一般数据的POST，它需要表单form的提交来完成。因此，jQuery上传插件也是将<input type="file">的数据转至一个新生的form当中将其提交，而表单的target指向新生的iframe，在iframe中做表单提交后的处理，完成后iframe会重新加载并包含处理结果，通过iframe的load事件便可捕捉并获取处理结果，回传至原表单所在的页面（feedback）中，实现jQuery即时上传的效果。而在表单提交的时候，为了实现选择文件后即时提交表单，则使用了input标签的change事件(index.html L19-21)，只要选择了文件，input的值就会发生变化，此时就可以提交表单进行处理了。

软件包下载：

 

/***************************************   追加  ***************************************/

受@东方翔 评论提示，测试了一下$.ajax 的FormData对象，然后发现成功了（FF、Chrome测试成功），嘿嘿~下面是源码，控制文件为submit_form_process.php不变。

特别的：contentType: false,

            processData: false,

这两个参数是必须的。

缺少contentType: false，$_FILES值为空。

缺少processData: false，FF控制台报错：“NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object”，直接不能运行。

1  2  3  4      5     
      6     
      7      8  9 10 14 
     
      15     
      16     
      17     
      18 
     
19 
     
    
     20 46 47 

 

/***************************************   追加2  ***************************************/

多图上传实现(独立于上面两个版本的文件）：

     1、index.html文件

        功能：点击图片添加文件、添加多个文件、即时上传文件、显示上传文件反馈信息。

        包含技术：

              1)$.ajax

              2)$.ajax 发送FormData对象

              3)input multiple="multiple"上传多个文件

              4)img οnclick="getElementById('inputfile').click()" 点击图片实现添加文件操作

              5)input type="file" 样式：height:0;width:0;z-index: -1;隐藏添加文件按钮（Chrome下使用display:none会导致点击失效）    

         源码：

1  2  3  4      5     
      6     
      7      8  9 10 19 
     
      
     
20 
     
      21     
      22     
      23     
      24     
      25     
      26     
      27     
      28 
     
29 
     
    
     30 65 66 

 

    2、submit_form_process.php后台处理文件

        功能：对FormData中包含的$_FILES数组做处理并上传图片文件，回传反馈信息。

        包含技术：

             1)FormData提交至$_FILES后的结构形式

             2)iconv('utf-8','gb2312',$filename) 对文件名进行转码处理

             3)preg_match("/^\.(jpg|jpeg|gif|png){1}$/i", strrchr($gb_filename, '.')) 文件类型过滤

             4)move_uploaded_file()上传文件

             5)echo '<textarea><img....<img....</textarea>';回传反馈信息。

        源码：

 

1 
     "; 7         exit(0); 8     } 9     10     $output = "";11     $index = 0;        //$_FILES 以文件name为数组下标，不适用foreach($_FILES as $index=>$file)12     foreach($_FILES as $file){13         $upload_file_name = 'upload_file' . $index;        //对应index.html FomData中的文件命名14         $filename = $_FILES[$upload_file_name]['name'];15         $gb_filename = iconv('utf-8','gb2312',$filename);    //名字转换成gb2312处理16         //文件不存在才上传17         if(!file_exists($dir_base.$gb_filename)) {18             $isMoved = false;  //默认上传失败19             $MAXIMUM_FILESIZE = 1 * 1024 * 1024;     //文件大小限制    1M = 1 * 1024 * 1024 B;20             $rEFileTypes = "/^\.(jpg|jpeg|gif|png){1}$/i"; 21             if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE && 22                 preg_match($rEFileTypes, strrchr($gb_filename, '.'))) {    23                 $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename);        //上传文件24             }25         }else{26             $isMoved = true;    //已存在文件设置为上传成功27         }28         if($isMoved){29             //输出图片文件<img>标签30             //注：在一些系统src可能需要urlencode处理，发现图片无法显示，31             //    请尝试 urlencode($gb_filename) 或 urlencode($filename)，不行请查看HTML中显示的src并酌情解决。32             $output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}'/>";33         }else {34             $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>";35         }36         37         $index++;38     }39     40     echo $output."";41     42 //End_php

 

软件包下载：

 

附：多图上传版加强，请参考《》