用最简单的例子实现jQuery图片即时上传-白红宇

用最简单的例子实现jQuery图片即时上传

阅读量：6175 次

发布时间：2019-06-21

本文共 4220 字，大约阅读时间需要 14 分钟。

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

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

　　　　1、上传面板HTML文件。

　　　　2、上传处理PHP文件。

　　　　3、jQuery库。

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

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

1  2  3  4     jQuery Upload Image 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='{<div></div>   $_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     FormData 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     Easy Ajax FormData Upload Multiple Images 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='{<div></div>   $dir_base}{<div></div>   $filename}' title='{<div></div>   $filename}' alt='{<div></div>   $filename}'/>";33         }else {34             $output .= "<img src='{<div></div>   $dir_base}error.jpg' title='{<div></div>   $filename}' alt='{<div></div>   $filename}'/>";35         }36         37         $index++;38     }39     40     echo $output."";41     42 //End_php

软件包下载：

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

你可能感兴趣的文章