文档章节

PHP JS JQ 异步上传并立即显示图片

zerodeng
 zerodeng
发布于 2014/09/15 16:29
字数 413
阅读 5510
收藏 13

提交页面:

<!DOCTYPE html>
<html>
<head>
<meta charset ="UTF-8" >
<title> Insert title here </title >
<script type ="text/javascript" src= "jquery.js"></script >
<script type ="text/javascript" >
$(document).ready( function (){
      $( "#i_1" ).load( function(){
             var url = $("#i_1" ).contents().find( "#pic").html();
             if (url != null){
                  $( "#tag_img" ).attr("src" ,url);
            }
      });
});
</script>
</head>
<body>
<img id= "tag_img" src = "" />
<form enctype ="multipart/form-data" action= "upload.php" method ="post" target= "upload_target">
     <input type= "file" name ="img" class= "file" value ="" />
     <input type= "submit" name ="uploadimg" value= "上传" />
</form>
<iframe id= "i_1" name = "upload_target"></iframe >
</body>
</html>



重点:

1.form中的action="处理图片的有效PHP页面"

2.form中的target="iframe的name属性值"

3.JS中必须要有可以等待iframe加载完后处理iframe返回过来的图片地址。



处理图片的PHP程序页面:

<?php
$tmp_name = $_FILES[ 'img'][ 'tmp_name'];
$name = $_FILES[ 'img'][ 'name'];
move_uploaded_file($tmp_name, './upload/'.$name);
$img = './upload/'.$name;
?>
<!DOCTYPE html>
<html>
<head>
<meta name ="viewport" content= "initial-scale=1.0, user-scalable=no" >
<meta http-equiv ="Content-type" content= "text/html;charset:utf-8" >
<script type ="text/javascript" src= "jquery.js"></script >
</head>
<body>
<div id= "pic" ><?php echo $img; ?></div >
</body>
</html>



重点:

1.$_FILE全局超级变量可以接收到POST过来的文件,HTML input的name就是$_FILE['name']

2.接下来可以做很多处理,如判断是不是图片,图片大小....

3.move_uploaded_file($tmp,$location)函数把图片移动到相应的路径中去,$tmp指的是文件的临时

地址,$location指的是文件移动收的相对路径(包含文件名的路径!)

4.想办法在这个处理页面中找一个地方安放一下处理好的图片。< div id= "pic" ><?php echo $img; ?></ div >



就这样,我们就可以很轻易的把一个图片异步上传并且立即显示到前台页面中。


© 著作权归作者所有

zerodeng

zerodeng

粉丝 7
博文 13
码字总数 4923
作品 0
湛江
程序员
私信 提问
加载中

评论(1)

相约酒吧
相约酒吧
请问能不能给个demo,我现在项目用到这个,需要完整源码好让我理解和应用。
JS异步上传压缩图片,并立即显示图片。

感谢 think2011 这位兄台的JS库:https://github.com/think2011/LocalResizeIMG 先看调用页面: <!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=de......

zerodeng
2015/11/05
0
0
php与Ajax实例

****************AJAX的学习要有JavaScript、HTML、CSS等基本的Web开发能力**************** [AJAX介绍] Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流...

晨曦之光
2012/03/09
10.3K
1
JS三教九流系列-require.js-网站模块化开发

js开发的模块化就是module处理 简单理解js模块化的开发就是让我们的web项目对js进行分类的处理 我们在开发网站的时候,里面会用要很多的类库,如jquery,还会有到基于jq各种插件,还会有其他...

透笔度
2015/08/19
0
0
JS杂谈系列-js的认识和js相关技术的了解

其实这篇博客应该是在讲js之前写的,现在算是补上的内容吧,我写的都是自己了解的,可不是凭空捏造,当然很多会记不清,错了及时提出啊!我写的时候也是写有用的,不会写一点子扯淡的玩意,像...

透笔度
2015/08/16
0
0
原创jquery图片上传预览插件uploadView

勾国印原创jquery图片上传前预览插件uploadView,支持自定义允许上传图片的最大尺寸、允许上传图片的格式、预览图片的宽度和高度以及上传成功后回调函数,兼容手机端和PC端。 大家在开发网站...

够过瘾
2015/10/24
5.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot 整合redis

springboot整合redis官方是有文档的: 英文看不懂可以翻译,代码应该看得懂, 这个是自动注入的。当然也可以xml注入,手动配置。 整合步骤: pom文件: <!-- spring boot web --> ...

jason_kiss
2分钟前
0
0
手机耗电问题,大部分是没有正确使用这个“锁”

当安卓设备闲置时,设备很快会进入休眠状态,以达到省电和减少CPU占用的目的。但有些应用在手机灭屏甚至系统休眠时,依然频繁占用CPU处理事件或唤醒屏幕提示用户消息,这类行为会导致手机耗电...

安卓绿色联盟
3分钟前
0
0
UI 设计中的渐变

>**简评:**渐变是通过两种或多种不同的色彩来绘制一个元素,同时在颜色的交界处进行衰减变化的一种设计。从拟物到扁平再到渐变,人们慢慢发现它能创造出从未有过的一种色彩感觉 —— 独特、...

极光推送
9分钟前
0
0
powerdesigner name 转注释vb脚本

Option Explicit ValidationMode = True InteractiveMode = im_BatchDim mdl ' the current model' get the current active model Set mdl = ......

zhu97
13分钟前
0
0
V2Ray的安装与使用

1 1. bash <(curl -s -L https://git.io/v2ray.sh)yum update -y && yum install curl -y安装好 curl 之后就能安装脚本了输入快捷管理命令v2ray后,开始进行v2ray服务端配置...

吕湘颖
15分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部