php ajax多图片添加,利用所学知识实现Ajax+PHP异步多图片上传

利用所学知识实现Ajax+PHP异步多图片上传

实现效果图

Html+Ajax 代码

实例

html>

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

/* 图片返回样式 */

#back{

height: auto;

text-align: center;

min-height: 100px;

border: 1px solid silver;

border-radius: 3px;

}

#back img{

margin:3px 10px;

border: 1px solid silver;

border-radius:3px;

padding: 6px;

width: 200px;

height: 120px;

}

#back p{

font-family: "微软雅黑";

line-height: 120px;

color: #ccc;

}

.file {

position: relative;

display: inline-block;

background-color:#1ab294;

border-radius: 4px;

padding: 8px 16px;

overflow: hidden;

color: #fff;

text-decoration: none;

text-indent: 0;

line-height: 20px;

}

.file:hover {

background-color:#e37c02;

}

.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;

}

选择图片

重新选择

$(document).ready(function(){

//响应文件添加成功事件

var back = $("#back");

$("#inputfile").change(function(){

if (back.children('img').length>19) { //设置图片数量

alert("最多只能选择20张图片");

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:'demo.php', /*php处理文件*/

type:'POST',  /*提交方式*/

data:data,

cache: false,

contentType: false,        /*不可缺*/

processData: false,         /*不可缺*/

success:function(data){

data = $(data).html();        /*转格式*/

if($("#back").children('img').length == 0)

{

$("#back").append(data.replace(//g,'>'));

}

else{

$("#back").children('img').eq(0).before(data.replace(//g,'>'));

}

},

error:function(){

alert('上传出错');

}

});

});

$(".close").on("click",function(){

$("#back").empty();

});

});

运行实例 »

点击 "运行实例" 按钮查看在线实例

PHP代码

实例

header('content-type:text/html charset:utf-8');

$dir_base = "upload/";     //文件上传根目录

//没有成功上传文件，报错并退出。

$output = "";

$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){

            //输出图片文件标签

//注：在一些系统src可能需要urlencode处理，发现图片无法显示，

//请尝试 urlencode($gb_filename) 或 urlencode($filename)，不行请查看HTML中显示的src并酌情解决。

            $output .= "";

}else {

//上传失败则把error.jpg传回给前端

            $output .= "";

}

$index++;

}

echo $output."";

运行实例 »

点击 "运行实例" 按钮查看在线实例

参考网站：

完成之后感觉很兴奋，实现过程中对前端的知识进行了大量的回顾，有一部分代码是直接复制过来的，只是稍微查了一下基本用法。