本用例主要含两个文件（index.html、submit_form_process.php），一个文件夹（files/）。特别的，files中含一个报错图片error.jpg，jquery库引用了外链。

     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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <htmlxmlns="http://www.w3.org/1999/xhtml">
3 <head>
4     <title>Easy Ajax FormData Upload Multiple Images</title>
5     <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
6     <metahttp-equiv="Content-Language"content="zh-CN" />
7     <scripttype="text/javascript"src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
8 </head>
9 <body>
10 <style>
11 #feedback{width:1200px;margin:0 auto;}
12 #feedback img{float:left;width:300px;height:300px;}
13 #ZjmainstaySignaturePicture,#addpicContainer{float:left;width:100%;}
14 #addpicContainer{margin-left:5px;}
15 #ZjmainstaySignaturePicture img{width:535px;}
16 #addpicContainer img{float:left;}
17 .loading{display:none;background:url("http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/ui-anim_basic_16x16.gif") no-repeat scroll 0 0 transparent;float:left;padding:8px;margin:18px 0 0 18px;}
18 </style>
19 <divid="ZjmainstaySignaturePicture"><ahref="http://www.cnblogs.com/Zjmainstay"><imgsrc="http://pic002.cnblogs.com/images/2012/383557/2012071311244097.jpg"/></a></div>
20 <divid="addpicContainer">
21     <!--利用multiple="multiple"属性实现添加多图功能-->
22     <!--position: absolute;left: 10px;top: 5px;只针对本用例将input隐至图片底下。-->
23     <!--height:0;width:0;z-index: -1;是为了隐藏input，因为Chrome下不能使用display:none，否则无法添加文件-->
24     <!--οnclick="getElementById('inputfile').click()" 点击图片时则点击添加文件按钮-->
25     <imgonclick="getElementById('inputfile').click()"style="cursor:pointer;border: 1px solid #AABBCC;"title="点击添加图片"alt="点击添加图片"src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg">
26     <inputtype="file"multiple="multiple"id="inputfile"style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/>
27     <spanclass="loading"></span>
28 </div>
29 <divid="feedback"></div>    <!--响应返回数据容器-->
30 <scripttype="text/javascript">
31 $(document).ready(function(){32     //响应文件添加成功事件
33 $("#inputfile").change(function(){34         //创建FormData对象
35         vardata= newFormData();36         //为FormData对象添加数据
37 $.each($('#inputfile')[0].files,function(i, file) {38 data.append('upload_file'+i, file);39 });40 $(".loading").show();//显示加载图片
41         //发送数据
42 $.ajax({43 url:'submit_form_process.php',44 type:'POST',45 data:data,46 cache:false,47 contentType:false,//不可缺参数
48 processData:false,//不可缺参数
49 success:function(data){50 data=$(data).html();51                 //第一个feedback数据直接append，其他的用before第1个（ .eq(0).before() ）放至最前面。
52                 //data.replace(/&lt;/g,'<').replace(/&gt;/g,'>') 转换html标签，否则图片无法显示。
53                 if($("#feedback").children('img').length== 0) $("#feedback").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));54                 else$("#feedback").children('img').eq(0).before(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));55 $(".loading").hide();//加载成功移除加载图片
56 },57 error:function(){58 alert('上传出错');59 $(".loading").hide();//加载失败移除加载图片
60 }61 });62 });63 });64 </script>
65 </body>
66 </html>

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 <?php2     header('content-type:text/html charset:utf-8');3     $dir_base = "./files/";     //文件上传根目录4 //没有成功上传文件，报错并退出。
5     if(empty($_FILES)) {6         echo "<textarea><img src='{$dir_base}error.jpg'/></textarea>";7         exit(0);8 }9
10     $output = "<textarea>";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."</textarea>";41
42 //End_php

——————————————————————————————————————————————————————————————————————————————————

兼容IE实现（谢谢@园丁8899的提问）

1、index.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <htmlxmlns="http://www.w3.org/1999/xhtml">
3 <head>
4     <title>Easy Ajax FormData Upload Multiple Images</title>
5     <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
6     <metahttp-equiv="Content-Language"content="zh-CN" />
7     <scripttype="text/javascript"src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
8 </head>
9 <body>
10 <style>
11 #feedback{width:1200px;margin:0 auto;}
12 #feedback img{float:left;max-width:300px;max-height:300px;}
13 #ZjmainstaySignaturePicture,#addpicContainer{float:left;width:100%;}
14 #addpicContainer{margin-left:5px;}
15 #ZjmainstaySignaturePicture img{width:535px;}
16 #addpicContainer img{float:left;}
17 .loading{display:none;background:url("files/loading.gif") no-repeat scroll 0 0 transparent;float:left;padding:8px;margin:18px 0 0 18px;}
18 </style>
19 <divid="ZjmainstaySignaturePicture"><ahref="http://www.cnblogs.com/Zjmainstay"><imgsrc="http://pic002.cnblogs.com/images/2012/383557/2012071311244097.jpg"/></a></div>
20 <divid="addpicContainer">
21     <!--利用multiple="multiple"属性实现添加多图功能-->
22     <!--position: absolute;left: 10px;top: 5px;只针对本用例将input隐至图片底下。-->
23     <!--height:0;width:0;z-index: -1;是为了隐藏input，因为Chrome下不能使用display:none，否则无法添加文件-->
24     <!--οnclick="getElementById('inputfile').click()" 点击图片时则点击添加文件按钮-->
25     <imgonclick="getElementById('inputfile').click()"style="cursor:pointer;border: 1px solid #AABBCC;"title="点击添加图片"alt="点击添加图片"src="files/addfile.jpg">
26     <inputtype="file"multiple="multiple"id="inputfile"style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/>
27     <spanclass="loading"></span>
28 </div>
29 <divid="feedback"></div>    <!--响应返回数据容器-->
30 <scripttype="text/javascript">
31 $(document).ready(function(){32　　　//成功回调函数抽取出来
33     varsuccessHandler= function(data){34 data=$(data).html();35         //第一个feedback数据直接append，其他的用before第1个（ .eq(0).before() ）放至最前面。
36         //data.replace(/&lt;/g,'<').replace(/&gt;/g,'>') 转换html标签，否则图片无法显示。
37         if($("#feedback").children('img').length== 0) $("#feedback").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));38         else$("#feedback").children('img').eq(0).before(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));39 $(".loading").hide();//加载成功移除加载图片
40 }41
42     if(typeof(FormData)!= 'function'){43         varformHtml= '<iframe id="uploadIframe" name="uploadIframe" style="display:none;"></iframe>'
44             +'<form action="submit_form_process.php" method="post" target="uploadIframe" name="uploadForm" id="uploadForm" enctype="multipart/form-data">'
45             +'<input type="file" id="inputfile" name="upload_file" style="float:left;"/>'
46             +'<input type="hidden" name="isIE" value="1"/></form>';47 $("#inputfile,#addpicContainer>img").remove();48 $("#addpicContainer").append(formHtml);49 $("#uploadIframe").load(function(){50             vardata=$(window.frames['uploadIframe'].document.body).find("textarea");51 successHandler(data);52 });53 }54
55     //响应文件添加成功事件
56 $("#inputfile").change(function(){57         if(typeof(FormData)!= 'function'){58 $("#uploadForm").submit();59 }else{60             //创建FormData对象
61             vardata= newFormData();62             //为FormData对象添加数据
63 $.each($('#inputfile')[0].files,function(i, file) {64 data.append('upload_file'+i, file);65 });66 $(".loading").show();//显示加载图片
67             //发送数据
68 $.ajax({69 url:'submit_form_process.php',70 type:'POST',71 data:data,72 cache:false,73 contentType:false,//不可缺参数
74 processData:false,//不可缺参数
75 success: successHandler,76 error:function(){77 alert('上传出错');78 $(".loading").hide();//加载失败移除加载图片
79 }80 });81 }82 });83 });84 </script>
85 </body>
86 </html>

2、submit_form_process.php

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

软件包下载：PHP jQuery多图上传实现源文件（兼容IE）

jQuery插件版本：jQuery插件版本(兼容IE)

本文结束之前特别感谢@东方翔在《用最简单的例子实现jQuery图片即时上传》中评论提及Ajax FormData对象，这才有了本文用jQuery实现多图上传的实现。

PS：该吐槽的吐槽，该评论的评论，该推荐的推荐，该踩的地方踩两脚——您的意见，是我完善的源泉。谢谢！

续《用最简单的例子实现jQuery图片即时上传》之多图上传实现相关推荐

  1. html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper

    插件描述:相信很多朋友都在大型的网站,如新浪微博.QQ微博上看到过头像裁图工具,感觉很高大尚吧,今天朋友们有福了,今天就来说一说一款这么高大尚的插件cropper,cropper是一款使用简单且功能强 ...

  2. php裁剪插件,简单功能强大的jQuery图片剪裁插件Image Cropper 中文api

    图片剪裁插件Image Cropper使用方法 引入必要的js和css核心文件 构建html,可以将图片或canvas直接包裹到一个块级元素中 初始化插件,可以使用$.fn.cropper方法来初始化 ...

  3. antlr4例子_ANTLR和网络：一个简单的例子

    antlr4例子 网络上的ANTLR:为什么? 我开始在MS-DOS上编写我的第一个程序. 因此,我非常习惯在自己的机器上安装工具. 但是在2016年,网络无处不在,因此那里也可能需要我们的语言. 可 ...

  4. ANTLR和网络：一个简单的例子

    网络上的ANTLR:为什么? 我开始在MS-DOS上编写我的第一个程序. 因此,我非常习惯在计算机上安装工具. 但是在2016年,网络无处不在,因此那里也可能需要我们的语言. 可能的情况: ANTLR ...

  5. 理解神经网络，从简单的例子开始（2）使用python建立多层神经网络

    这篇文章将讲解如何使用python建立多层神经网络.在阅读这篇文章之前,建议先阅读上一篇文章:理解神经网络,从简单的例子开始.讲解的是单层的神经网络.如果你已经阅读了上一篇文章,你会发现这篇文章的代码 ...

  6. 理解神经网络，从简单的例子开始（1）7行python代码构建神经网络

    理解神经网络,从简单的例子开始(1)7行python代码构建神经网络 前言 本文分为两个部分,第一个部分是一个简单的实例:9行Python代码搭建神经网络,这篇文章原文为:原文链接, 其中中文翻译版来 ...

  7. .net中的对象序列化(1)： 序列化是什么, 以及一个简单的例子

    1. 为什么需要序列化,什么是序列化 对于一个程序来说, 使用到的对象都是存在于内存中的.如果想保存这些对象的运行时状态, 或者需要在不同进程或者网络间传递对象,就需要序列化. 序列化就是讲运行中的对 ...

  8. CSharpGL(1)从最简单的例子开始使用CSharpGL

    CSharpGL(1)从最简单的例子开始使用CSharpGL 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含20多个独立的Demo ...

  9. 一个简单的例子看java线程机制

    一个简单的例子看java线程机制 作者: zyf0808 发表日期: 2006-03-26 11:20 文章属性: 原创 复制链接 import java.util.*; public class T ...

最新文章

  1. 五分钟看懂UML类图与类的关系详解
  2. uniapp定义全局变量方法
  3. linux php ldap扩展,php_ldap域集成模块安装-159
  4. Http压测工具wrk使用指南
  5. BigData预处理(完整步骤)
  6. 三星死守中国市场，强撑溢价难挽回颓势吗？
  7. java并行调度_java并行调度框架封装及示例
  8. 凸优化－Proximal GD
  9. HDFVIEW3.1.2下载
  10. 6.misc类设备与蜂鸣器驱动
  11. xcode 常见错误
  12. 使用微博自动记录俯卧撑个数
  13. 这三款小巧好用的APP，请务必收下
  14. C/C++ GBK2312转Unicode
  15. 在网络上共享条码打印机
  16. 企业中的IT需求如何管理？
  17. 计算机休眠密码,启用或停用Windows 10睡眠唤醒密码的方法
  18. Stata：VAR 中的脉冲响应分析 (IRF)
  19. ERP解决方案在印度尼西亚
  20. php libev 主动发送,libev学习笔记

热门文章

  1. Windows Azure Cloud Service (24) 在模拟器中运行时跳过Windows Azure Startup任务
  2. 微信小程序“信用卡还款”项目实践
  3. 磁盘管理之基本操作格式化
  4. 互联网企业招聘零分考生 扇了谁的耳光？
  5. 【DFS + Backtracking】LeetCode 79. Word Search
  6. Lintcode 51.上一个排列[Medium]
  7. 《 ATSS：Adaptive Training Sample Selection》
  8. 关于C# .net JavaScript跨域
  9. Software--IoC 依赖倒置 控制反转
  10. struts2配置默认Action