在 PHP 中结合 Ajax 技术进行图片上传
前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握。本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Ajax 技术。
本例将要实现这样的效果:当用户选择图片,开始上传后,后台上传完成时,随即会显示到当前页面。由于,从开始上传到上传完成,再到图片显示均在一个页面上 完成(从表面上看)。所以使用 Ajax 技术是必须的。但如何使用这些操作在一个页面上来完成呢?考虑到这样的情况,当文件开始上传后,便开始打开 <form> 标签中 action 属性所指向的网页 (PHP 页),这样岂不起离开了原来的页面了么?幸好,有办法解决这个问题,这里我们使用 <iframe> 标签,并将 <form> 标签的 target 设置为该 <iframe>。
来梳理一下思路:在 HTM 页中添加 <form> 和 <iframe>,设置 <form> 的 target 属性为这个 <iframe>;当文件上传开始后,就直接在当前页面的这个 <iframe> 中进行上传。而这个上传操作完成后,PHP 页又后通过 Javascript 来调用 Ajax 中的 XMLHttpRequest 对象,来完成最后的图片显示工作。这样看来,我们的目的就达到了。这里再补充一点,由于并不想让用户看到多余的东西在页面中,所以应该把 <iframe> 隐藏。
本实例一共包括三个文件和一个供上传图片用的文件夹。三个文件分别是:
uppic.htm 显示上传表单,用户的操作以及图片的显示都在这个页面中;
uppic.php 处理上传的 PHP 程序;
showpic.php 负责显示图片的 PHP 程序。
来看 uppic.htm 中的内容:
<html>
<head>
<script type="text/javascript">
function uploadimg(theform){
//提交当前表单
theform.submit();
}
function runajax(objId,serverPage){
//创建 XMLHttpRequest 对象
var xmlhttp=false;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",serverPage);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(objId).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
</script>
</head>
<body>
<div id="showpic">
</div>
<div id="myform">
<form action="uppic.php" method="post" enctype="multipart/form-data" target="upframe" onsubmit="uploadimg(this); return false;">
请选择一个图片上传:<input type="file" name="mypic" id="mypic" /><br />
<br />
<input type="submit" name="submit" value=" 上传 " />
</form>
</div>
<iframe id="upframe" name="upframe" src="uppic.php" style="display:none;">
</iframe>
</body>
</html>
其中的 JS 代码很简单,像所有的 Ajax 程序一样,无任何特别之处。在 <body> 中,主要包括三个部分:名为 showpic 的 <div>(图片上传完成后,用来显示图片)、<form> 和隐藏的 <iframe>(其 display 属性为 none)。并且在 <form> 中其 target 属性是 <iframe> 标签的名称。
来看 uppic.php 的代码:
<?php
//允许上传文件的 MIME 类型
$allow_types=array(
"image/jpeg",
"image/pjpeg",
"image/gif",
"image/png"
);
$up_folder="ups"; // 图片保存的文件夹
if(isset($_FILES['mypic'])){
//检测是否是图片文件
if(in_array($_FILES['mypic']['type'],$allow_types)){
if($_FILES['mypic']['error']==0){
$srcfile=$_FILES['mypic']['tmp_name'];
$destfile=$up_folder."/".$_FILES['mypic']['name'];
if(!move_uploaded_file($srcfile,$destfile)){
echo "上传图片时发生错误";
}
else{
//没有发生错误
?>
<body onload="finishupload(parent,'<?php echo $destfile; ?>');">
<img src="<?php echo $destfile; ?>" />
<script type="text/javascript">
function finishupload(theframe,thefile){
var file="showpic.php?img=" + thefile;
if(theframe.runajax){
theframe.runajax("showpic",file);
}
else{
alert("Error");
}
}
</script>
</body>
<?php
}
}
}
}
else{
echo "Error";
}
?>
在没有发生错误的情况下,将来载入 Body,并执行 finishupload 函数。在这个函数中,程序所传的值分别是 parent 和目标文件名(图片上传到服务器上的文件名,包括其相对路径)。需要说明的是,由于这个页面是在 <iframe> 中呈现的,所以这里的 parent 就是指包含这个 <iframe> 的父级容器,也就是 uppic.htm 的窗口。由于在 uppic.htm 页面中定义了名为 runajax 的 Javascript 函数,所以通过调用 parent.runajax 就是调用它。而 runajax 中的一个参数说明了请求的页面:showpic.php。
来看 showpic.php 的代码:
<?php
if(isset($_GET['img'])){
$file=$_GET['img'];
if(!is_file($file) || !file_exists($file)){
echo "Error";
exit;
}
else{
?>
<img src="<?php echo $file; ?>" />
<?php
}
}
?>
由于该页面仅负责显示图片,所以代码不多,要显示的图片是通过传递过来的类型为 GET 的 img 参数(在 Ajax 请求中附在 showpic.php 后面的 URL 参数)。程序道先对这个文件进行检查,如果不出错,就将图片显示出来,当图片显示出来之后,自然就作是 Ajax 的响应结果显示到 uppic.htm 中指定的位置了。
在 PHP 中结合 Ajax 技术进行图片上传的更多相关文章
- JSP+Servlet中使用jspsmartupload.jar进行图片上传下载
JSP+Servlet中使用cos.jar进行图片上传 upload.jsp <form action="FileServlet" method="post&quo ...
- JSP+Servlet中使用cos.jar进行图片上传(文件上传亦然)
链接:JSP+Servlet中使用jspsmartupload.jar进行图片上传下载 关于cos.jar,百度百科只有这么几句话(http://baike.baidu.com/subview/406 ...
- 【转载】【JAVA秒会技术之图片上传】基于Nginx及FastDFS,完成图片的上传及展示
基于Nginx及FastDFS,完成商品图片的上传及展示 一.传统图片存储及展示方式 存在问题: 1)大并发量上传访问图片时,需要对web应用做负载均衡,但是会存在图片共享问题 2)web应用服务器的 ...
- Asp.net中FileUpload控件实现图片上传并带预览显示
单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...
- django中博客后台将图片上传作为用户头像
添加上传目录 # 如果不添加上传目录,仍然可以上传成功,默认为project目录,如果models.py定义了upload_to="目录名称",则会上传到"project ...
- 【原创】MVC项目中使用JQuery的upladify图片上传插件相关问题的解决方案
一. 关于Uploadify Uploadify是一个jQuery插件,你可以很容易的为你的网站添加多个文件上传功能.有两个不同的版本(HTML5和Flash)允许你灵活选择为您的网站和回退方法正确实 ...
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
- ajax+node实现图片上传
利用formData实现ajax上传图片后,保存图片到指定收藏夹,然后展示新重命名后的图片 html: <input type="file" id="uploadI ...
- Vue.js项目中使用 Ajax 和 FormDate 对象上传文件
let param = new FormData(); param.append("paths", this.ruleForm.uploadPath); param.append( ...
随机推荐
- asp.net 安全性相关参考
<system.web> <depolyment retail="true" /> </system.web> AntiXSS http:/ ...
- ExtGrid
刷新表中数据 Ext.getCmp('SystemManage_role_ContainPresonnel_grid').store.reload(); store.load({ url: '/dat ...
- FreeMarker页面中获得contextPath
要在ftl页面中使用contextPath,需要在viewResolver中做如下配置(红色部分): <bean id="viewResolver" class=" ...
- 手写堆_C++
一般主程序中拿堆顶元素 x=h[]; h[]=h[top--]; down(); 在堆尾加入元素 h[++top]=x; up(top); 上浮下沉操作 inline void up(int x) { ...
- Java垃圾收集器之--Garbage-First Collector
简介 Garbage-First(G1)垃圾收集器全面支持JDK7 Upate 4及后续版本.G1收集器是一个服务器形式(server-style)的垃圾收集器,主要用于内存大.多处理器的 ...
- sendmessage和postmessage的区别
BOOL PostMessage( HWND hWnd, // handle of destination window ...
- asp.net 配置 X-Frame-Options
近日网站在安全检查,送检的网站被反馈有以下问题 X-Frame-Options Header未配置 漏洞描述: 弱点描述: X-Frame-Options HTTP响应头可以指示浏览器是否允许当前网页 ...
- python和php对比
对php比较熟悉,最近开始学些python,总是搞混,特记录下来,用于熟悉python:1.python数组和php不同,php相对简单统一,即array(包括普通数组和关联数组两部分),python ...
- USACO Section 3.3 商店购物 Shopping Offers
题目背景 在商店中,每一种商品都有一个价格(用整数表示).例如,一朵花的价格是 2 zorkmids (z),而一个花瓶的价格是 5z .为了吸引更多的顾客,商店举行了促销活动. 题目描述 促销活动把 ...
- highchart.js的使用
highchart.js是一个很实用的图表插件,涵盖柱状图.曲线图,区域图.3D图.饼图.散列图.混合图等等,功能很强大. 首先去官网下载最新版highchart.js插件,中文网地址:http:// ...