jQuery实现图片即时上传 附完备源代码
|
最近看了一些jQuery即时上传的插件，总算看懂了些道路。现将其最为焦点的一部门抽取出来，以期用最简朴的例子来声名jQuery图片即时上传的道理。 起首本用例一共包括3个文件: 1、上传面板HTML文件。 2、上传处理赏罚PHP文件。 3、jQuery库。 第一、上传面板HTML文件(index.html)。 其首要包括了jQuery库、即时上传所需js、表单和iframe框架。下面是其源码，个中已附具体注释。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
<!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(/</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> <!-- 提交表单处理赏罚iframe框架 --> <div id="feedback"></div> <!-- 相应返回数据容器 --> </body> </html> 第二、上传处理赏罚PHP文件(submit_form_process.php)。 其首要包括了图片文件的简朴上传，及返回图片标签<img>，个中存储刚上传的图片。下面是其源码。 Copy to Clipboard引用的内容：[www.veryhuo.com]
<?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上传插件也是将<input type="file">的数据转至一个新生的form傍边将其提交，而表单的target指向新生的iframe，在iframe中做表单提交后的处理赏罚，完成后iframe会从头加载并包括处理赏罚功效，通过iframe的load变乱便可捕获并获取处理赏罚功效，回传至原表单地址的页面（feedback）中，实现jQuery即时上传的结果。而在表单提交的时辰，为了实现选择文件后即时提交表单，则行使了input标签的change变乱(index.html L19-21)，只要选择了文件，input的值就会产生变革，此时就可以提交表单举办处理赏罚了。
（编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
下载：最简朴的jQuery即时上传示例
