Tips:点此可运行HTML源码

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

  本用例主要含两个文件(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 onclick="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 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>Easy Ajax FormData Upload Multiple Images</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     <meta http-equiv="Content-Language" content="zh-CN" />
 7     <script type="text/javascript" src="https://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 <div id="ZjmainstaySignaturePicture"><a href="http://www.cnblogs.com/Zjmainstay"><img src="http://pic002.cnblogs.com/images/2012/383557/2012071311244097.jpg"/></a></div>
20 <div id="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     <!-- onclick="getElementById('inputfile').click()" 点击图片时则点击添加文件按钮 -->
25     <img onclick="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     <input type="file" multiple="multiple" id="inputfile" style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/>
27     <span class="loading"></span>
28 </div>
29 <div id="feedback"></div>    <!-- 响应返回数据容器 -->
30 <script type="text/javascript">
31 $(document).ready(function(){
32     //响应文件添加成功事件
33     $("#inputfile").change(function(){
34         //创建FormData对象
35         var data = new FormData();
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 <?php
 2     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 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>Easy Ajax FormData Upload Multiple Images</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     <meta http-equiv="Content-Language" content="zh-CN" />
 7     <script type="text/javascript" src="https://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 <div id="ZjmainstaySignaturePicture"><a href="http://www.cnblogs.com/Zjmainstay"><img src="http://pic002.cnblogs.com/images/2012/383557/2012071311244097.jpg"/></a></div>
20 <div id="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     <!-- onclick="getElementById('inputfile').click()" 点击图片时则点击添加文件按钮 -->
25     <img onclick="getElementById('inputfile').click()" style="cursor:pointer;border: 1px solid #AABBCC;" title="点击添加图片" alt="点击添加图片" src="files/addfile.jpg">
26     <input type="file" multiple="multiple" id="inputfile" style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/>
27     <span class="loading"></span>
28 </div>
29 <div id="feedback"></div>    <!-- 响应返回数据容器 -->
30 <script type="text/javascript">
31 $(document).ready(function(){
32   //成功回调函数抽取出来
33     var successHandler = 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         var formHtml = '<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             var data = $(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             var data = new FormData();
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 <?php
 2     $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:该吐槽的吐槽,该评论的评论,该推荐的推荐,该踩的地方踩两脚——您的意见,是我完善的源泉。谢谢!

posted @ 2012-08-11 10:41  Zjmainstay  阅读(7566)  评论(7编辑  收藏  举报