链接：http://www.jq22.com/jquery-info21055
效果：
代码：
DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>jQuery多图片上传title>
head>
<style>
.add_div {
width: 400px;
height: 500px;
border: solid #ccc 1px;
margin-top: 40px;
margin-left: 170px;
padding-left: 20px;
}
.file-list {
height: 125px;
display: none;
list-style-type: none;
}
.file-list img {
max-width: 70px;
vertical-align: middle;
}
.file-list .file-item {
margin-bottom: 10px;
float: left;
margin-left: 20px;
}
.file-list .file-item .file-del {
display: block;
margin-left: 20px;
margin-top: 5px;
cursor: pointer;
}
style>
<body>
<div class="add_div">
<p>
<span>名称：span>
<input type="text" name="" id="name" value=""/>
p>
<p>
<span>图片：span>
<input type="file" name="" id="choose-file" multiple="multiple"/>
p>
<p>
<ul class="file-list ">
ul>
p>
<button style="cursor: pointer;margin-left: 150px;" href="javascript:;" id="upload">上传button>
div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js">script>
<script>
$(function () {
////图片上传//
//声明变量
var $button = $('#upload'),
//选择文件按钮
$file = $("#choose-file"),
//回显的列表
$list = $('.file-list'),
//选择要上传的所有文件
fileList = [];
//当前选择上传的文件
var curFile;
// 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
// 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
$file.on('change', function (e) {
//上传过图片后再次上传时限值数量
var numold = $('li').length;
if(numold >= 6){
layer.alert('最多上传6张图片');
return;
}
//限制单次批量上传的数量
var num = e.target.files.length;
var numall = numold + num;
if(num >6 ){
layer.alert('最多上传6张图片');
return;
}else if(numall > 6){
layer.alert('最多上传6张图片');
return;
}
//原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
curFile = this.files;
//curFile = $file.get(0).files;
//console.log(curFile);
//将FileList对象变成数组
fileList = fileList.concat(Array.from(curFile));
//console.log(fileList);
for (var i = 0, len = curFile.length; i < len; i++) {
reviewFile(curFile[i])
}
$('.file-list').fadeIn(2500);
})
function reviewFile(file) {
//实例化fileReader,
var fd = new FileReader();
//获取当前选择文件的类型
var fileType = file.type;
//调它的readAsDataURL并把原生File对象传给它，
fd.readAsDataURL(file);//base64
//监听它的onload事件，load完读取的结果就在它的result属性里了
fd.onload = function () {
if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
$list.append('
'' + file.name + '删除 ')
}
}
}
//点击删除按钮事件：
$(".file-list").on('click', '.file-del', function () {
let $parent = $(this).parent();
console.log($parent);
let index = $parent.index();
fileList.splice(index, 1);
$parent.fadeOut(850, function () {
$parent.remove()
});
//$parent.remove()
});
//点击上传按钮事件：
$button.on('click', function () {
var name = $('#name').val();
// var catgory = $('#catgory').val();
// var price = $('#price').val();
// var desc = $('#desc').val();
// var stock = $('#stock').val();
// var status = $("input[type='radio']:checked").val();
// var reg = /^[1-9]\d*$/;
// if (!(reg.test(stock))) {
// layer.alert('商品库存为整数!');
// return;
// }
if (name == '') {
layer.alert('请输入商品名称');
return;
}
// else if (status == null) {
// layer.alert('请输入商品显示状态');
// return;
// }
// else if (catgory == '') {
// layer.alert('请输入商品分类');
// return;
// }
// else if (price == '') {
// layer.alert('请输入商品价格');
// return;
// }
// else if (stock == '') {
// layer.alert('请输入商品库存');
// return;
// }
// else if (fileList.length == 0) {
// layer.alert('请选择商品图片');
// return;
// }
if(fileList.length > 6){
layer.alert('最多允许上传6张图片');
return;
} else {
var formData = new FormData();
for (var i = 0, len = fileList.length; i < len; i++) {
//console.log(fileList[i]);
formData.append('upfile[]', fileList[i]);
}
formData.append('name', name);
// formData.append('catgory', catgory);
// formData.append('price', price);
// formData.append('desc', desc);
// formData.append('stock', stock);
// formData.append('status', status);
//console.log(formData);
$.ajax({
url: './product_add.php',
type: 'post',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
if (data.status == '1') {
layer.msg(data.content, {icon: 6});
} else if (data.status == '2') {
layer.msg(data.content, {icon: 1});
}
}
})
}
})
})
script>
body>
html>