Iframe和jquery结合实现不刷新上传

最新推荐文章于 2022-10-28 11:46:19 发布

xmlife

最新推荐文章于 2022-10-28 11:46:19 发布

阅读量816

点赞数

分类专栏： web

web 专栏收录该内容

101 篇文章 0 订阅

订阅专栏

简单的例子来说明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" />
      

</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(/</g,'<').replace(/>/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>    
<div id="feedback"></div>    
</body>
</html>

第二、上传处理PHP文件(submit_form_process.php)。
　　　　其主要包含了图片文件的简单上传，及返回图片标签<img>，其中存储刚上传的图片。下面是其源码。
<?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（补注：当时不知道有FormData对象），我也尝试过。但是，由于上传文件不同于一般数据的POST，它需要表单form的提交来完成。因此，jQuery上传插件也是将<input type="file">的数据转至一个新生的form当中将其提交，而表单的target指向新生的iframe，在iframe中做表单提交后的处理，完成后iframe会重新加载并包含处理结果，通过iframe的load事件便可捕捉并获取处理结果，回传至原表单所在的页面（feedback）中，实现jQuery即时上传的效果。

xmlife

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Iframe和jquery结合实现不刷新上传

简单的例子来说明jQuery图片即时上传的原理。　　首先本用例一共包含3个文件:　　　　1、上传面板HTML文件。　　　　2、上传处理PHP文件。　　　　3、jQuery库。　第一、上传面板HTML文件（index.html)。其主要包含了jQuery库、即时上传所需js、表单和iframe框架。http://www.w3.org/TR/x
复制链接

扫一扫