Ajax+PHP实现异步图片上传
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax+PHP实现异步图片上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="js/jquery-1.10.2.min.js"></script>
<style type="text/css">
#feedback{
height: 200px;
text-align: center;
height: 160px;
border: 1px solid silver;
border-radius: 3px;
}
#feedback img{
margin:3px 10px;
border: 1px solid silver;
border-radius:3px;
padding: 6px;
width: 35%;
height: 85%;
}
#feedback p{
font-family: "微软雅黑";
line-height: 120px;
color: #ccc;
}
.file {
position: relative;
display: inline-block;
border: 1px solid #1ab294;
border-radius: 4px;
padding: 8px 16px;
overflow: hidden;
color: #fff;
text-decoration: none;
text-indent: 0;
line-height: 20px;
color: #1ab294;
} .file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.box{
margin-top: 10px;
text-align: center;
}
.box a{
margin-left: 10px;
}
</style>
</head>
<body>
<!-- 响应返回数据容器 -->
<div id="feedback">
</div>
<div class="box">
<a href="javascript:;" class="file">选择图片
<input type="file" multiple="multiple" id="inputfile" name="" class="photo">
</a>
<a href="javascript:;" class="file close">重新选择
<input type="buttom" class="photo">
</a>
</div>
<script type="text/javascript">
$(document).ready(function(){
//响应文件添加成功事件
var feedback = $("#feedback");
$("#inputfile").change(function(){
if (feedback.children('img').length>1) {
alert("最多只能选择两张图片");
return false;
}
//创建FormData对象
var data = new FormData();
//为FormData对象添加数据
$.each($('#inputfile')[0].files, function(i, file) {
data.append('upload_file'+i, file);
});
$(".loading").show(); //显示加载图片
//发送数据
$.ajax({
url:'up.php', /*去过那个php文件*/
type:'POST', /*提交方式*/
data:data,
cache: false,
contentType: false, /*不可缺*/
processData: false, /*不可缺*/
success:function(data){
data = $(data).html(); /*转格式*/ //第一个feedback数据直接append，其他的用before第1个（ .eq(0).before() ）放至最前面。
//data.replace(/</g,'<').replace(/>/g,'>') 转换html标签，否则图片无法显示。
if($("#feedback").children('img').length == 0)
{
$("#feedback").append(data.replace(/</g,'<').replace(/>/g,'>'));
}
else{
$("#feedback").children('img').eq(0).before(data.replace(/</g,'<').replace(/>/g,'>'));
}
},
error:function(){
alert('上传出错');
}
});
});
$(".close").on("click",function(){
$("#feedback").empty();
});
});
</script>
</body>
</html>
2.up.php
<?php
header('content-type:text/html charset:utf-8');
$dir_base = "./files/"; //文件上传根目录
//没有成功上传文件，报错并退出。
$output = "<textarea>";
$index = 0; //$_FILES 以文件name为数组下标，不适用foreach($_FILES as $index=>$file)
foreach($_FILES as $file){
$upload_file_name = 'upload_file' . $index; //对应index.html FomData中的文件命名
$filename = $_FILES[$upload_file_name]['name'];
$gb_filename = iconv('utf-8','gb2312',$filename); //名字转换成gb2312处理
//文件不存在才上传
if(!file_exists($dir_base.$gb_filename)) {
$isMoved = false; //默认上传失败
$MAXIMUM_FILESIZE = 1 * 1024 * 1024; //文件大小限制 1M = 1 * 1024 * 1024 B;
$rEFileTypes = "/^\.(jpg|jpeg|gif|png){1}$/i";
if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE &&
preg_match($rEFileTypes, strrchr($gb_filename, '.'))) {
$isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename); //上传文件
}
}else{
$isMoved = true; //已存在文件设置为上传成功
}
if($isMoved){
//输出图片文件<img>标签
//注：在一些系统src可能需要urlencode处理，发现图片无法显示，
//请尝试 urlencode($gb_filename) 或 urlencode($filename)，不行请查看HTML中显示的src并酌情解决。
$output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}'/>";
}else {
//上传失败则把error.jpg传回给前端
$output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>";
}
$index++;
}
echo $output."</textarea>"; //End_php
3.运行效果
在指定的目录下已经有刚刚上传的2张图片
Ajax+PHP实现异步图片上传的更多相关文章
- ssm使用Ajax的formData进行异步图片上传返回图片路径，并限制格式和大小
之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单 <form id= "uploadForm" enctype="multipart ...
- asp.net core 通过ajax上传图片及wangEditor图片上传
asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端 ...
- 原生JS实现异步图片上传（预览）
效果 实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...
- 基于THINKPHP+layui+Ajax无刷新实现图片上传预览
<fieldset class="layui-elem-field" style="width:500px;margin:50px 0 0 300px;" ...
- 在php中使用jquery uploadify进行多图片上传
jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadi ...
- 图片上传并回显Ajax异步篇
图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormD ...
- ajax图片上传及FastDFS入门案例.
今天来开始写图片上传的功能, 现在的图片上传都讲求 上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jqu ...
- larave异步多图片上传的实现和注意事项及$file的对象函数
要使用多图片上传,首先要在input添加multipart,同时注意name的参数要加[],不然,不算是数组.具体如下,注意绿色地方.如果是单张图片,把[]去掉,不要multiple; <inp ...
- ajax异步文件上传和进度条
一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...
随机推荐
- 虚树(Bzoj3611: [Heoi2014]大工程)
题面 传送门 虚树 把跟询问有关的点拿出来建树,为了方便树\(DP\) 在\(LCA\)处要合并答案,那么把这些点的\(LCA\)也拿出来 做法:把点按\(dfs\)序排列,然后求出相邻两个点的\(L ...
- Liunx一些命令
1.设置管理员的密码:sudo passwd root2.获取管理员权限su root3.查看IP地址sudo ifconfig -a4.创建一个文件sudo touch test.txt5.创建一个 ...
- JavaScript自定义字符串格式化
在JS中没有字符串拼接的方法,如过要使用怎么办呢?这时我们可以通过字符串的prototype可以自定义方法. <script> String.prototype.format = func ...
- 学习servlet心得
1,关于字符编码问题: // resp.setCharacterEncoding("UTF-8");//这个的作用仅仅只是输出字符,不做格式转换成HTML // resp.setC ...
- 《APP移动终端决胜之道视觉设计艺术》学习笔记
1.20-2.9 1.合理的层级化2.信息的整合(短信收发件箱),信息的整合就像创建文件夹,可以将相关的东西放在一起,以便于使用者搜索与查找3.(微信聊天界面)相比之下使用了对话框图形的界面,元素更加 ...
- 修改zabbix为中文，并解决乱码问题(三）
当Zabbix安装完成后,默认则是英文界面,有的人看英文不习惯,现在将其改为中文界面 一.修改为中文 1.打开Zabbix界面,Administrator-Users 选择语言-Chinese(zh_ ...
- 常用sql commands以及mysql问题解决日志
mysql workbench常用命令快捷键 ctrl+T ->创建新的sql query tab ctrl+shift+enter->执行当前的sql命令 https://dev.mys ...
- 巧用花生壳将局域网内的FTP和www服务器发布到互联网
一.目的:用生壳发布FTP和mail服务器到互连网. 二.网络环境:(出租房多家共用路由器上网,ADSL的1Mbps带宽,动态PPPOE拨号,帐号和密码存储在soho路由器中,路由器自动联机上网,并为 ...
- win环境下使用sqlmap写shell + MYSQL提权(默认就是system权限)
今天在来一个mysql提权 (也可以说是默认system权限提的) 在被黑站点找到一个站 先教拿shell是有注入漏洞的 有可能是root权限的注入点 可以确定是有注入漏洞的 也得到了 物理路径 ...
- java数组回顾---线性查找最大值最小值---二分查找
import java.util.Scanner; public class ArrayDemo { public static void main(String []args) { //------ ...