用最简单的例子实现jQuery图片即时上传
【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 <!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>jQuery Upload Image</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="jquery-1.6.2.min.js"></script>--> <!-- 本地jquery库-->
8 <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
9 </head>
10 <body>
11 <style>
12 #exec_target{display:none;width:0;height:0;}
13 #feedback{width:1200px;margin:0 auto;}
14 #feedback img{float:left;width:300px;height:300px;}
15 </style>
16 <script type="text/javascript">
17 $(document).ready(function(){
18 //选择文件成功则提交表单
19 $("#upload_file").change(function(){
20 if($("#upload_file").val() != '') $("#submit_form").submit();
21 });
22 //iframe加载响应，初始页面时也有一次，此时data为null。
23 $("#exec_target").load(function(){
24 var data = $(window.frames['exec_target'].document.body).find("textarea").html();
25 //若iframe携带返回数据，则显示在feedback中
26 if(data != null){
27 $("#feedback").append(data.replace(/</g,'<').replace(/>/g,'>'));
28 $("#upload_file").val('');
29 }
30 });
31 });
32 </script>
33 <form id="submit_form" method="post" action="submit_form_process.php" target="exec_target" enctype="multipart/form-data">
34 <input type="file" name="upload_file" id="upload_file"> <!-- 添加上传文件 -->
35 </form>
36 <iframe id="exec_target" name="exec_target"></iframe> <!-- 提交表单处理iframe框架 -->
37 <div id="feedback"></div> <!-- 响应返回数据容器 -->
38 </body>
39 </html>
第二、上传处理PHP文件(submit_form_process.php)。
其主要包含了图片文件的简单上传，及返回图片标签<img>，其中存储刚上传的图片。下面是其源码。
1 <?php
2 //header('content-type:text/html charset:utf-8'); /* 这句要删除，否则可能会导致IE下回传HTML变成下载 */
3 //不存在当前上传文件则上传
4 if(!file_exists($_FILES['upload_file']['name'])) move_uploaded_file($_FILES['upload_file']['tmp_name'],iconv('utf-8','gb2312',$_FILES['upload_file']['name']));
5 //输出图片文件<img>标签
6 echo "<textarea><img src='{$_FILES['upload_file']['name']}'/></textarea>";
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的值就会发生变化，此时就可以提交表单进行处理了。
软件包下载：最简单的jQuery即时上传示例
/*************************************** 追加 ***************************************/
受@东方翔 评论提示，测试了一下$.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 <!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>FormData</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="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 </style>
14 <div>
15 <!-- 点击图片添加文件方式 -->
16 <img src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg" onclick="getElementById('inputfile').click()" title="点击添加图片" alt="点击添加图片">
17 <input type="file" name="image" style="opacity:0;filter:alpha(opacity=0);" id="inputfile"/>
18 </div>
19 <div id="feedback"></div> <!-- 响应返回数据容器 -->
20 <script type="text/javascript">
21 $(document).ready(function(){
22 $("#inputfile").change(function(){
23 //创建FormData对象
24 var data = new FormData();
25 //为FormData对象添加数据
26 //
27 $.each($('#inputfile')[0].files, function(i, file) {
28 data.append('upload_file', file);
29 });
30 $.ajax({
31 url:'submit_form_process.php',
32 type:'POST',
33 data:data,
34 cache: false,
35 contentType: false, //不可缺
36 processData: false, //不可缺
37 success:function(data){
38 data = $(data).html();
39 if($("#feedback").children('img').length == 0) $("#feedback").append(data.replace(/</g,'<').replace(/>/g,'>'));
40 else $("#feedback").children('img').eq(0).before(data.replace(/</g,'<').replace(/>/g,'>'));
41 }
42 });
43 });
44 });
45 </script>
46 </body>
47 </html>
/*************************************** 追加2 ***************************************/
多图上传实现(独立于上面两个版本的文件）：
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="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 <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(/</g,'<').replace(/>/g,'>') 转换html标签，否则图片无法显示。
53 if($("#feedback").children('img').length == 0) $("#feedback").append(data.replace(/</g,'<').replace(/>/g,'>'));
54 else $("#feedback").children('img').eq(0).before(data.replace(/</g,'<').replace(/>/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
软件包下载：PHP jQuery多图上传实现源文件
附：多图上传版加强，请参考《续《用最简单的例子实现jQuery图片即时上传》之多图上传实现》
用最简单的例子实现jQuery图片即时上传的更多相关文章
- 使用Typora写博客，图片即时上传，无需第三方图床-EasyBlogImageForTypora
背景 习惯使用markdown的人应该都知道Typora这个神器,它非常简洁高效.虽然博客园的在线markdown编辑器也不错,但毕竟是网页版,每次写东西需要登录系统-进后台-找到文章-编辑-保存草稿 ...
- Demo：servlet实现图片的上传
一个简单的servlet例子,实现图片的上传功能,上传的图片给 ?HttpServletResponse 对象 public class BackGroundLogoServlet extends H ...
- PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例
PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度. 下面让我们来看 ...
- asp.net实现图片在线上传并在线裁剪
1.说明 接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁 ...
- 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
- 赞！带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...
- PHP使用七牛云存储之图片的上传、下载、303重定向教程，CI框架实例
网上关于七牛云存储的教程除了官网上的API文档,其他的资料太少了.研究了下API之后,现在已经能实现图片的上传和下载及上传之后的重定向. http://blog.csdn.net/cqcre/arti ...
- 基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...
- .Net Core 图片文件上传下载
当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...
随机推荐
- 织梦CMS安装分享插件
获取百度分享按钮织梦系统插件 点击下载:dedecms 5.* 插件 更新日期:2011.09.05 1.下载百度分享插件的织梦cms版本. 2.使用管理员账号登录您的站点后台管理中心,单击" ...
- nginx重启报找不到nginx.pid的解决方法
nginx被停止(nginx -s stop)或者直接杀掉了进程(kill -9 nginx的进程号)后,调用命令(nginx -s reload 或者 nginx -s reopen)会报错:无法找 ...
- 在Intellij idea 2017中运行tomcat 8.5
前提:jdk,tomcat都已安装完,环境变量该配置的都配置了,tomcat localhost:xx 能登上去 首先新建web小项目 new project next 为项目命个名 finis ...
- 邓_PHP面试2
又开始搞php了,好多php知识忘记了,学习php的方法是看面试题 下面是我搜集的一份php的面试题目 1.用PHP打印出前一天的时间格式是2006-5-10 22:21:21(2分) echo da ...
- asp.net -mvc框架复习（7）-基于MVC搭建用户登录项目框架
整体框架: 一.搭建Model层 1.添加通用数据访问类 2.添加实体类(封装和传递数据,和数据库中数据表对应) 3.添加数据访问类(通常和实体类同名,但是后缀名发生改变) 二.搭建控制器层Contr ...
- 【编程技巧】java不使用第三个变量处理两个变量的交换
public class SwapNum {public static void main(String[] args) {doSwapNum();}public static void doSwap ...
- 再叙Java反射
Java中的反射 本文为反射的基础知识部分. 能够分析类能力的程序被称为反射(reflective). 反射机制允许程序在运行时取得任何一个已知名称的class的内部信息,容许程序在运行时加载.探知. ...
- ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法
ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...
- java里程碑之泛型--泛型注意的几点
1,泛型的基本语法:类名<具体类> 对象名 = new 类名<具体类>().类型参数规范如下: 1),K键,比如映射的键,key的类型 2),V值,比如Map的值,value类 ...
- Shell脚本中使用function（函数）示例
这篇文章主要介绍了Shell脚本中使用function(函数)示例,本文着重讲解的是如何在shell脚本中使用自定义函数,并给出了两个例子,需要的朋友可以参考下 函数可以在shell script ...