JS多图上传相比大家都会
但是上传到网页预览的时候，可能会进行筛选，删除一部分
操作file文件想必大家很少有试过吧
下面来说一下完整的实现方法
这里使用的是 formdata 的方式 通过ajax来上传图片
首先我们需要两个按钮 选择图片 、 上传
<form action="" id="formdata"> <div id="upload" class="btn btn-primary">选择图片</div> <div class="btn btn-success" id="uploadImg">上传</div> <input id="file" type="file" multiple style=""> <div class="gallery" id="gallery"></div> </form> $("#upload").click(function(){ $("#file").trigger("click");
现在选择图片已经完成了
我们现在通过 URL.createObjectURL(file) 把图片转成 blob
然后append到页面就可以进行预览了
$("#file").change(function(){
//每次切换前，把之前的预览图片清空
document.getElementById("gallery").innerHTML="";
//开始遍历图
var img=document.getElementById("file").files;
var div=document.createElement("div");
for(var i=0;i<img.length;i++){
var file=img[i]; var url=URL.createObjectURL(file);
var box=document.createElement("img");
box.setAttribute("src",url);
box.className='img';
//append到页面上
var body=document.getElementsByClassName("gallery")[0];
body.appendChild(box);
好的，来张GIF
大家看到我这个上面是有 X号的，可以把预览的图片删除掉
这个就是今天的重点了，怎么把Input里面的 单个 file进行移除操作呢？
事实上，我们是不能直接改变 input type='file'里面的值的，由于安全问题
但是我们可以通过别的方法
当用户选择完图片时，我们用一个数组把 files保存到一个变量中
var img=document.getElementById("file").files;
var fileList = Array.from(img);
我们生成删除按钮的时候把图片的名称绑定 到删除标签data里面 data-filename
var deleteIcon = document.createElement("span");
deleteIcon.className = 'delete';
deleteIcon.innerText = 'x';
deleteIcon.dataset.filename = img[i].name;
imgBox.appendChild(deleteIcon);
这样用户点删除的 按钮时，我们就能知道他删除的哪一个了
当用户点击之后拿到 filename
在之前保存的fileList中进行遍历，找到那一个文件，移除
$(deleteIcon).click(function () {
var filename = $(this).data("filename");
$(this).parent().remove();//页面中移除
var fileList = Array.from(that.files);
for(var j=0;j<fileList.length;j++){
if(fileList[j].name = filename){
fileList.splice(j,1);//从数组中移除
break;
that.files = fileList
到了最后的上传了
创建一个formdata对象，把表单的内容放进去
注意：我的file的按钮是没有给 name的 所以，不会传到后台。
因为里面的文件我们也不能控制，所以就用刚刚保存的fileList 添加到 fromdata中
var files = that.files;
var uploadFile = new FormData($("#formdata")[0]);
for(var i=0;i<files.length;i++){
uploadFile.append('imgs[]',files[i]);
这里的文件必须遍历放进去，不能直接把files丢进去
然后通过ajax发送就好了
$.ajax({
url:'index.php',
type:'POST',
data:uploadFile,
async: false,
cache: false,
contentType: false, //不设置内容类型
processData: false, //不处理数据
success:function(data){
error:function(){
alert("上传失败！");
再来上个图
虽然这个截图软件大家看不到我的图标，但是结果也能看见了
我上传了3张图，X掉了一张，上传，目录下面出现了两张
color: #fff;
text-shadow: 0 1px rgba(0,0,0,.1);
background-image: -webkit-linear-gradient(top,#4d90fe 0,#4787ed 100%);
background-image: -o-linear-gradient(top,#4d90fe 0,#4787ed 100%);
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
background-image: linear-gradient(to bottom,#4d90fe 0,#4787ed 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4d90fe', endColorstr='#ff4787ed', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
background-repeat: repeat-x;
border: 1px solid #3079ed;
.btn-success {
color: #fff;
text-shadow: 0 1px rgba(0,0,0,.1);
background-image: -webkit-linear-gradient(top,#35aa47 0,#35aa47 100%);
background-image: -o-linear-gradient(top,#35aa47 0,#35aa47 100%);
background-image: -webkit-gradient(linear,left top,left bottom,from(#35aa47),to(#35aa47));
background-image: linear-gradient(to bottom,#35aa47 0,#35aa47 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff35aa47', endColorstr='#ff35aa47', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
background-repeat: repeat-x;
border: 1px solid #359947;
.gallery .img-item{
position: relative;
.gallery .img-item .delete{
position: absolute;
display: block;
width: 20px;
height:20px;
color: #fff;
background: rgba(0,0,0,0.7);
line-height: 20px;
text-align: center;
border-radius: 50%;
top: 25px;
right: 25px;
cursor: pointer;
.img{
width: 300px;
margin: 20px;
</style>
</head>
<form action="" id="formdata">
<div id="upload" class="btn btn-primary">选择图片</div>
<div class="btn btn-success" id="uploadImg">上传</div>
<input id="file" type="file" multiple style="">
<div class="gallery" id="gallery"></div>
</form>
<script>
var files=[];
var that = this;
$("#upload").click(function(){
$("#file").trigger("click");
$("#file").change(function(){
document.getElementById("gallery").innerHTML="";
var img=document.getElementById("file").files;
var div=document.createElement("div");
for(var i=0;i<img.length;i++){
var file=img[i]; var url=URL.createObjectURL(file);
var box=document.createElement("img");
box.setAttribute("src",url);
box.className='img';
var imgBox=document.createElement("div");
imgBox.style.display='inline-block';
imgBox.className='img-item';
var deleteIcon = document.createElement("span");
deleteIcon.className = 'delete';
deleteIcon.innerText = 'x';
deleteIcon.dataset.filename = img[i].name;
imgBox.appendChild(deleteIcon);
imgBox.appendChild(box);
var body=document.getElementsByClassName("gallery")[0];
body.appendChild(imgBox);
that.files = img;
$(deleteIcon).click(function () {
var filename = $(this).data("filename");
$(this).parent().remove();
var fileList = Array.from(that.files);
for(var j=0;j<fileList.length;j++){
if(fileList[j].name === filename){
fileList.splice(j,1);
break;
that.files = fileList
$("#uploadImg").click(function(){
var files = that.files;
var uploadFile = new FormData($("#formdata")[0]);
for(var i=0;i<files.length;i++){
uploadFile.append('imgs[]',files[i]);
if("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != ""){
$.ajax({
url:'index.php',
type:'POST',
data:uploadFile,
async: false,
cache: false,
contentType: false, //不设置内容类型
processData: false, //不处理数据
success:function(data){
error:function(){
alert("上传失败！");
}else {
</script>
</body>
</html>
$files=$_FILES['imgs'];
$msg=array();
foreach ($files['tmp_name'] as $index=>$file){
$type = $files['type'][$index];
if($type="image/jpeg"){
$type="jpg";
}else if($type="image/png"){
$type="png";
if($type == "png" || $type == "jpg"){
$name = $files['name'][$index];
$newname = date ( "Ymdhis" ).rand(0,9999);