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

[转载]用最简单的例子实现jQuery图片即时上传 – Zjmainstay – 博客园.

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

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

1、上传面板HTML文件。

2、上传处理PHP文件。

3、JQuery库。

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>jQuery Upload Image</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta http-equiv="Content-Language" content="zh-CN" />
     <!--<script type="text/javascript" src="jquery-1.6.2.min.js"></script>-->    <!-- 本地jquery库-->
     <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
 </head>
 <body>
 <style>
     #exec_target{display:none;width:0;height:0;}
     #feedback{width:1200px;margin:0 auto;}
     #feedback img{float:left;width:300px;height:300px;}    
 </style>
 <script type="text/javascript">
 $(document).ready(function(){
     //选择文件成功则提交表单
     $("#upload_file").change(function(){
         if($("#upload_file").val() != '') $("#submit_form").submit();
     });
     //iframe加载响应,初始页面时也有一次,此时data为null。
     $("#exec_target").load(function(){
         var data = $(window.frames['exec_target'].document.body).find("textarea").html();
         //若iframe携带返回数据,则显示在feedback中
         if(data != null){
             $("#feedback").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
             $("#upload_file").val('');
         }
     });
 });
 </script>
 <form id="submit_form" method="post" action="submit_form_process.php" target="exec_target" enctype="multipart/form-data">
     <input type="file" name="upload_file" id="upload_file">        <!-- 添加上传文件 -->
 </form>
 <iframe id="exec_target" name="exec_target"></iframe>    <!-- 提交表单处理iframe框架 -->
 <div id="feedback"></div>    <!-- 响应返回数据容器 -->
 </body>
 </html>

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

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

<?php
     header('content-type:text/html charset:utf-8');
     //不存在当前上传文件则上传
     if(!file_exists($_FILES['upload_file']['name'])) move_uploaded_file($_FILES['upload_file']['tmp_name'],iconv('utf-8','gb2312',$_FILES['upload_file']['name']));
     //输出图片文件<img>标签
     echo "<textarea><img src='{$_FILES['upload_file']['name']}'/></textarea>";
 //End_php

 总结之原理透析:

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

软件包下载:最简单的jQuery即时上传示例

演示地址:jQuery即时上传演示

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏