Ajax+PHP实现异步上传多张图片

HTML代码

<!--
date: 2018-04-27 13:46:55
author: 王召波
descride: 多张图片上传
-->
<!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="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<style type="text/css">
#feedback{
min-height: 200px;
text-align: center;
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 (this.files.length>2) {
alert("最多只能选择两张图片");
return false;
}
//创建FormData对象
var data = new FormData();
//为FormData对象添加数据
$.each($('#inputfile')[0].files, function(i, file) {
data.append('ruoshui'+i, file);
});
//追加其他数据
data.append('id',1);
//发送数据
$.ajax({
url:'./upload.php',
type:'post',
data:data,
dataType:'json',
cache: false,
contentType: false,
processData: false,
// contentType: false 和processData: false,这两个参数是为了设置ajax对file文件对象进行序列化
success:function(data){
var str = '';
$.each(data,function(i,n){
str +='<img src="'+n+'">';
});
$("#feedback").append(str);
},
error:function(){
alert('上传出错');
}
});
});
$(".close").on("click",function(){
$("#feedback").empty();
});
});
</script>
</body>
</html>

PHP代码

<?php
/**
* date: 2018-04-27 13:46:55
* author: 王召波
* descride: 多张图片上传
*/
header('content-type:text/html charset:utf-8');
$baseUrl = "./";
$picArr = "";
$index = 0;
foreach($_FILES as $file){
$picName = 'ruoshui' . $index;//对应index.html FomData中的文件命名
$fileName = $_FILES[$picName]['name'];
//文件不存在才上传
if(!file_exists($baseUrl.$fileName)) {
$isMoved = false; //默认上传失败
$MAXIMUM_FILESIZE = 1 * 1024 * 1024;//文件大小限制1M = 1 * 1024 * 1024 B;
$picType = "/^\.(jpg|jpeg|gif|png){1}$/i";
if ($_FILES[$picName]['size'] <= $MAXIMUM_FILESIZE &&
preg_match($picType, strrchr($fileName, '.'))) {
$isMoved = @move_uploaded_file ( $_FILES[$picName]['tmp_name'], $baseUrl.$fileName);//上传文件
}
}
$picArr[] = $baseUrl.$fileName;
$index++;
}
echo json_encode($picArr);

效果图

Ajax+PHP实现异步上传多张图片的更多相关文章

  1. Ajax表单异步上传(包括文件域)

    起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 尝试 先是尝试了一下 "jQu ...

  2. Ajax使用formdata异步上传文件,报错the request was rejected because no multipart boundary was found

    基于jQuery的Ajaxs使用FormData上传文件要注意两个参数的设定 processData设为false 把processData设为false,让jquery不要对formData做处理, ...

  3. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  4. Struts2学习(四)利用ajax异步上传

    上一篇说到怎样在struts2中进行上传下载.我们使用了struts的标签通过表单提交的方式,但大家知道表单提交会造成页面总体的刷新,这样的方式很不友好,那我们今天就来说说怎样结合ajax方式进行异步 ...

  5. php用jquery-ajax上传多张图片限制图片大小

    php用jquery-ajax上传多张图片限制图片大小 /** * 上传图片,默认大小限制为3M * @param String $fileInputName * @param number $siz ...

  6. ajax异步上传到又拍云的实例教程

    作者:白狼 出处:www.manks.top/article/async_upload_to_upyun 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否 ...

  7. html5+php实现文件的断点续传ajax异步上传

    html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...

  8. MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题,答案是不能的!

    MVC 5.0(or5.0↓)  Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 & ...

  9. java使用xheditor Ajax异步上传错误

    java使用xheditor Ajax异步上传时候错误如下:the request doesn't contain a multipart/form-data or multipart/mixed s ...

随机推荐

  1. RabbitMQ:MSVCR120.dll ,c000001d 错误

    今天在win7上面安装RabbitMQ,安装过程没有问题,但是RabbitMQ无法启动,错误如下: 今多方查找,原因在于win7没有安装SP1的补丁包,安装完成后,启动RabbitMQ就没有问题了. ...

  2. Android来电拦截及来电转移

    1. 电话拦截这个功能大家可能都知道了,就是利用反射原理调用ITelephony的隐藏方法来实现.这个就不说了,在附件的代码里有.2.拦截后提示忙音/空号/已关机/已停机这个功能其实是要用到MMI指令 ...

  3. python学习第39天

    # 数据操作 # 增 # 删 # 改 # 查 # 单表查询 # 多表查询

  4. Spring Boot (一): Spring Boot starter自定义

    前些日子在公司接触了spring boot和spring cloud,有感于其大大简化了spring的配置过程,十分方便使用者快速构建项目,而且拥有丰富的starter供开发者使用.但是由于其自动化配 ...

  5. Netty学习4—NIO服务端报错:远程主机强迫关闭了一个现有的连接

    1 发现问题 NIO编程中服务端会出现报错 Exception in thread "main" java.io.IOException: 远程主机强迫关闭了一个现有的连接. at ...

  6. 5)协程二(yeild from)

     一:yield from说明 python从3.3版本开始使用yield from 替代yield  yield from 结构会在内部自动捕获 StopIteration 异常. 这种处理方式与 ...

  7. 搭建 RabbitMQ Server 高可用集群【转】

    阅读目录: 准备工作 搭建 RabbitMQ Server 单机版 RabbitMQ Server 高可用集群相关概念 搭建 RabbitMQ Server 高可用集群 搭建 HAProxy 负载均衡 ...

  8. Confluence 6 修改警告的阈值和表现

    修改警告的阈值 一些警告的阈值是可以被配置的.如果你发现一些阈值很容易就触发警告了,你可以对这些阈值进行调整让你的系统警告不容易被触发. 访问 Recognized System Properties ...

  9. Redis扩展

    Redis扩展下载地址:https://windows.php.net/downloads/pecl/releases/redis/ PHP怎么安装redis扩展 http://www.php.cn/ ...

  10. django----Form实时更新两种方式

    在ModelForm需要知道: from app03 import models from django.forms import ModelForm class UserForm(ModelForm ...