<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">
<input type="text" name="user" id="user" placeholder="请输入昵称">
<input type="file" name="userImage" id="userImage">
<input type="submit" name="sub" value="提交">
</form>

<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">
<input type="text" name="user" id="user" placeholder="请输入昵称">
<input type="file" name="userImage1" id="userImage1">
<input type="file" name="userImage2" id="userImage2">
<input type="file" name="userImage3" id="userImage3">
<input type="submit" name="sub" value="提交">
</form>

<input type="file" name="userImage" id="userImage" style="display: none;">
<input type="button" id="" value="选择文件" onclick="document.getElementById('userImage').click()">

<!-- 当前选择的文件列表 文件信息模版 -->
<script type="text/template" id="file-temp-item-tpl">
<span class="file-temp-item" style="{{style}}">
<span class="file-temp-name">{{name}}</span>
<span class="file-temp-btn">×</span>
</span>
</script>

// 计算每一项坐标left、占宽width
left = i === 0 ? 2 : 2 + i * (100 / fileTempLen);
width = 100 / fileTempLen - 2;

　　<!-- 查看更多文件 文件信息模版 -->
<script type="text/template" id="file-more-item-tpl">
<li>
<span class="file-item-more-name">{{name}}</span>
<span class="file-item-more-btn">×</span>
</li>
</script>

　<form name="form" id="form" method="post" action="fileTest.php" enctype="multipart/form-data">
<!-- <input type="number" name="numberTest" value="100"> -->
<input type="file" name="fileTest[]" id="fileTest" multiple>
<!-- 当前选择的文件列表（最多显示5条） -->
<span class="file-temp">
</span>
<!-- 查看更多文件 -->
<ul class="item-more">
</ul>
<input type="button" class="btn btn-success" id="uploadBtn" value="上传">
<p class="upload-tip">文件上传成功</p>
</form>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
  <style type="text/css">
    html {
      font-family: Arial;
    }
    form {
      margin: 50px auto;
      width: 400px;
    }
    input {
      width: 300px;
      padding: 4px;
    }
    #uploadBtn {
      margin-top: -3px;
      margin-left: 5px;
      width: 60px;
      height: 30px;
      font-weight: bold;
      font-size: 12px;
    }
    #fileTest {
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    .file-temp {
      position: relative;
      display: none;
      width: 300px;
      height: 31px;
    }
    .file-temp-item {
      position: absolute;
      top: 4px;
      height: 24px;
    }
    .item-more-btn {
      display: inline-block;
      position: absolute;
      top: 18px;
      right: 0.5%;
      width: 10px;
      height: 10px;
      color: #777;
      cursor: pointer;
    }
    .item-more-btn:hover {
      border-top-color: #aaa;
    }
    .file-temp-name {
      display: inline-block;
      overflow: hidden;
      width: 90%;
      height: 26px;
      padding: 2px 15px 2px 5px;
      border-radius: 2px;
      background-color: #eaeaf3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .file-temp-btn {
      position: absolute;
      display: inline-block;
      top: 4px;
      right: 11%;
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      border: 1px solid #ddd;
      background-color: #ccc;
      border-radius: 50%;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
    }
    .item-more {
      position: absolute;
      overflow-y: auto;
      display: none;
      padding-left: 0;
      width: 300px;
      max-height: 150px;
      list-style: none;
    }
    .item-more li {
      position: relative;
      padding: 5px;
      border: 1px solid #ccc;
      border-top: none;
    }
    .item-more li:hover {
      background-color: #f5f5f9;
    }
    .file-item-more-name {
      display: inline-block;
      width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .file-item-more-btn {
      position: absolute;
      display: inline-block;
      top: 8px;
      right: 2%;
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      border: 1px solid #ddd;
      background-color: #ddd;
      border-radius: 50%;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
    }
    .file-item-more-btn:hover {
      background-color: #ccc;
    }
    .upload-tip {
      display: none;
      margin: 50px auto;
      text-align: center;
      font-size: 12px;
    }
  </style>

<input type="file" onchange="console.log(this.value);">

<input type="file" multiple onchange="console.log(this.value);">

<input type="file" multiple onchange="console.log(this.files);">

<input type="file" multiple onchange="console.log(Array.prototype.splice.call(this.files, 1, 1));">

Object.defineProperty(FileList.prototype, 'length', {
writable: true,
configurable: true
});

// 存储更新所选文件
var curFiles = []; 
...
// 选中文件后
var files = this.files;
if (files && files.length) {
// 原始FileList对象不可更改，所以将其赋予curFiles提供接下来的修改
Array.prototype.push.apply(curFiles, files);
}

var name = $(this).prev().text();
// 去除该文件
curFiles = curFiles.filter(function(file) {
return file.name !== name;
});

var oMyForm = new FormData();
oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"
// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);
var oFileBody = '<a id="a"><b id="b">hey!</b></a>'; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});
oMyForm.append("webmasterfile", oBlob);
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

var fd = new FormData(document.getElementById("fileinfo")); // 使用某个表单作为初始项
fd.append("CustomField", "This is some extra data");
$.ajax({
url: "stash.php",
type: "POST",
data: fd,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false // 告诉jQuery不要去设置Content-Type请求头
});

var fd = new FormData($('#form')[0]);
fd.append('myFileTest', curFiles);
$files = $_REQUEST['myFileTest'];
var_dump($files);

var fd = new FormData($('#form')[0]);
for (var i = 0, j = curFiles.length; i < j; ++i) {
fd.append('myFileTest[]', curFiles[i]);
}
$files = $_FILES['myFileTest'];
var_dump($files);

var fd = new FormData($('#form')[0]);
for (var i = 0, j = curFiles.length; i < j; ++i) {
fd.append('myFileTest[]', curFiles[i]);
}
fd.append('myTest', [1, 2, 3]);
$files = $_FILES['myFileTest'];
$test = $_REQUEST['myTest'];
var_dump($test);
var_dump($files);

fd.append('myFileTest[]', curFiles[i]);

<input type="number" name="numberTest" value="100">

<?php
$files = $_FILES['myFileTest'];
$test = $_REQUEST['numberTest'];
echo json_encode(array(
'len' => count($files['name']),
'num' => $test
));
?>

<script type="text/javascript">
/**
* 向文件列表元素中添加相应的文件项
* @param {Array} files 当前的文件列表数组对象
*/
function addItem(files) {
var fileTempItemTpl = $('#file-temp-item-tpl').html(),
fileMoreItemTpl = $('#file-more-item-tpl').html()
htmlTemp = [],
htmlMoreTemp = [],
// 文件列表中各文件坐标位置及所占空间
left = 2,
width = 100,
// 最多取前5个文件
fileTempLen = files.length > 5 ? 5 : files.length;
for (var i = 0, j = files.length; i < j; ++i) {
// 当i > 4，即第6个文件开始
if (i > 4) {
htmlMoreTemp.push(fileMoreItemTpl.replace('{{name}}', files[i].name));
continue;
}
// 计算每一项坐标left、占宽width
left = i === 0 ? 2 : 2 + i * (100 / fileTempLen);
width = 100 / fileTempLen - 2;
htmlTemp.push(fileTempItemTpl
.replace('{{style}}', 'left: ' + left + '%;width: ' + width + '%;')
.replace('{{name}}', files[i].name)
);
}
// 渲染相关元素内容
$('.file-temp').html(''
+ '<input type="text" style="background-color:#fff;" class="form-control" id="fileTemp" readonly>'
+ htmlTemp.join('')
+ (files.length > 5
? '<span class="item-more-btn" title="查看更多">=</span>'
: ''
)
);
$('.item-more').html(htmlMoreTemp.join(''));
}
// 保存当前选择的（更新后）文件列表
var curFiles = [];
// 初始选择文件时触发
$('#fileTest').change(function() {
var $this = $(this),
$temp = $('.file-temp'),
files = this.files;
if (files && files.length) {
// 原始FileList对象不可更改，所以将其赋予curFiles提供接下来的修改
Array.prototype.push.apply(curFiles, files);
addItem(curFiles);
$this.hide();
$temp.css('display', 'inline-block');
}
});
$(document)
// 取消选择某个文件时，在文件列表数组对象中删除这个值，并更新列表
.on('click', '.file-temp-btn, .file-item-more-btn', function() {
$('.upload-tip').hide();
var name = $(this).prev().text();
// 去除该文件
curFiles = curFiles.filter(function(file) {
return file.name !== name;
});
// 文件列表数组对象长度大于5才显示“更多文件列表”下拉项
if (curFiles.length <= 5) {
$('.item-more').hide();
}
// 文件列表数组被清空则重置文件选择表单项
if (!curFiles.length) {
$('#fileTest').val('').show();
$('.file-temp').css('display', 'none');
} else {
addItem(curFiles);
}
console.log(curFiles)
})
// 显示“更多文件列表”下拉项
.on('click', '.item-more-btn', function() {
$('.upload-tip').hide();
$('.item-more').show('normal');
});
// 上传操作
$('#uploadBtn').click(function() {
$('.upload-tip').hide();
// 构建FormData对象
var fd = new FormData($('#form')[0]);
for (var i = 0, j = curFiles.length; i < j; ++i) {
fd.append('myFileTest[]', curFiles[i]);
}
$.ajax({
url: 'fileTest.php',
type: 'post',
data: fd,
processData: false,
contentType: false,
success: function(rs) {
rs = JSON.parse(rs);
$('.upload-tip')
.addClass('text-success')
.removeClass('text-error')
.text(rs.len + '个文件上传成功, number项值为' + rs.num)
.show();
},
error: function(err) {
}
});
});
</script>