php ajax多图片添加,PHP,Js,Ajax实现多图片上传

这篇文章上次修改于 1113 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

引入JS上传图片.btn{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;background-color:#0cc;color:#fff;display:inline-block;height:28px;line-height:28px;text-align:center;width:72px;transition:background-color .2s linear 0s;border:none;cursor:pointer;margin:0 0 20px}

.btn:hover{background-color:#f55;text-decoration:none}

.ul_pics li{position:relative;float:left;margin:5px;width:calc(100% / 6 - 10px);border:1px solid #ddd;text-align:center;}

.ul_pics li img{max-width:100%;max-height:100%;}

.ul_pics li p{position:absolute;bottom:0;overflow:hidden;margin:0;width:100%;background:#ddd;color:#fff;text-overflow:ellipsis;white-space:nowrap;}

.progress{position:absolute;top:45%;left:2%;margin:0;width:96%;background:#fff;}

.bar{display:block;width:0;height:20px;background-color:#03A9F4;}

.percent{position:absolute;top:0;left:45%;display:inline-block;color:#F44336;line-height:20px;}

@media (max-width: 900px){.ul_pics li{width:calc(100% / 4 - 10px);}}

@media (max-width: 600px){.ul_pics li{width:calc(100% / 3 - 10px);}}

JSvar uploader = new plupload.Uploader({ //创建实例的构造方法

runtimes: 'html5,flash,silverlight,html4',

//上传插件初始化选用那种方式的优先级顺序

browse_button: 'btn',

// 上传按钮

url: "ajax.php",

//远程上传地址

flash_swf_url: 'plupload/Moxie.swf',

//flash文件地址

silverlight_xap_url: 'plupload/Moxie.xap',

//silverlight文件地址

filters: {

max_file_size: '1gb',

//最大上传文件大小(格式100b, 10kb, 10mb, 1gb)

mime_types: [ //允许文件上传类型

{

title: "files",

extensions: "jpg,png,gif"

}]

},

multi_selection: true,

//true:ctrl多文件上传, false 单文件上传

init: {

FilesAdded: function(up, files) { //文件上传前

if ($("#ul_pics").children("li").length > 30) {

alert("您上传的图片太多了！");

uploader.destroy();

} else {

var li = '';

plupload.each(files,

function(file) { //遍历文件

li += "

0%

";

});

$("#ul_pics").append(li);

uploader.start();

}

},

UploadProgress: function(up, file) { //上传中，显示进度条

$("#" + file.id).find('.bar').css({

"width": file.percent + "%"

}).find(".percent").text(file.percent + "%");

},

FileUploaded: function(up, file, info) { //文件上传成功的时候触发

var data = JSON.parse(info.response);

$("#" + file.id).html("

" + data.name + "

");

},

Error: function(up, err) { //上传出错的时候触发

alert(err.message);

}

}

});

uploader.init();

AJAX.PHP<?php

$typeArr = array("jpeg","jpg", "png", "gif");//允许上传文件格式

$path = "uploads/";//上传路径

if (isset($_POST)) {

$name = $_FILES['file']['name'];

$size = $_FILES['file']['size'];

$name_tmp = $_FILES['file']['tmp_name'];

if (empty($name)) {

echo json_encode(array("error"=>"您还未选择图片"));

exit;

}

$type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型

if (!in_array($type, $typeArr)) {

echo json_encode(array("error"=>"请上传jpg,png或gif类型的图片！"));

exit;

}

if ($size > (10000 * 1024)) {

echo json_encode(array("error"=>"图片大小已超过10000KB！"));

exit;

}

$pic_name = time() . rand(10000, 99999) . "." . $type;//图片名称

$pic_url = $path . $pic_name;//上传后图片路径+名称

if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹

echo json_encode(array("error"=>"0","pic"=>$pic_url,"name"=>$pic_name));

} else {

echo json_encode(array("error"=>"上传有误，请检查服务器配置！"));

};

}; ?>`请输入代码`