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"> ...
随机推荐
- 简单工厂模式使用ResourceBundle读取.properties配置文件
在做项目时,遇到需要创建DAO.Service等类的实例的时候,想到用工厂方法来运作,而简单工厂方法又有明显的缺点: ①由于工厂类集中了所有实例的创建逻辑,违反了高内聚责任分配原则,将全部创建逻辑集中 ...
- Redis实现分布式锁1
Jedis结合setNX方法实现分布式锁 public boolean lock(String key, int exprie) { try { exprie = exprie <= 0 ? 6 ...
- 简易搭建git仓库、关联远程和本地仓库方法。克隆仓库方法。同一台电脑上创建两个git ssh key方法。
一,在github上建仓库 react-js-antd-demo: 二:将远程仓库与本地仓库关联 git remote add origin git@github.com:begin256/react ...
- drupal7 jquery脚本忽然不运行
jquery脚本经过调试,确认没有错误,但是最最近一次,调整了引入的次序,目的是方便我识别哪些js是我自己写的,哪些是前端给的,便于后期维护时,迅速找到自己写的部分. 调整引入次序前: 调整后(调整后 ...
- Drupal7配置简洁URL(Clear URL)
参考:Apache Rewrite url重定向功能的简单配置 这两天折腾死了 首先说一下我的环境: Aache2.4.25-x64-vc14-r1;php-7.0.19-Win32-VC14-x64 ...
- centos使用ngnix代理https
自己建web服务器,考虑到安全问题需要用到https. 在此使用nginx的反向代理功能实现https 腾讯云证书安装指引 ssl.conf 配置 // http请求重定向https server { ...
- MySQL数据库(7)----数据库的选择、创建、删除和更改
1.选择数据库 使用 USE 语句可以选择数据库,并把它指定为MySQL服务器连接的默认(当前)数据库: USE db_name; 要想选择数据库,用户必须要具备相应的访问权限:否则,会出现错误提示. ...
- 基于SVM.NET的验证码识别算法实现
工作之余,对这个算法做了一些研究,并成功对验证码进行了识别,对普通验证码识别率在90%左右,识别速度相当快,已基于此做过一些自动查询.提交程序(例如投票.发帖等) ,还上过淘宝店,赚过一笔外快,现将相 ...
- js:自动亮起100盏灯
1) 使用js在页面上显示100盏灯,并标记从1到100的编号2) 页面加载后3秒,从编号是1的灯依次自动亮起.3) 每过0.5秒亮下一盏灯(10分)4) 所有灯亮起后,弹出确 ...
- Windows Azure系列公开课 - 第二课：为什么选择Windows Azure（上）
Windows Azure是微软的云平台,可以提供广泛服务.您可以通过它搭建.部署并管理解决方案,用于实现您可以想象的几乎任何目标.换言之,WindowsAzure是拥有无限可能的世界.无论您是需要运 ...