php 多图上传 预览后删除,JS多图预览、删除、上传（详细）

JS多图上传相比大家都会

但是上传到网页预览的时候，可能会进行筛选，删除一部分

操作file文件想必大家很少有试过吧

下面来说一下完整的实现方法

这里使用的是 formdata 的方式 通过ajax来上传图片

首先我们需要两个按钮 选择图片 、 上传

按钮.png

文件上传的 input太丑了 我们把他隐藏起来

当点击 选择图片按钮的时候 我们用

$("#file").trigger("click");

来触发Input的点击事件

选择图片

上传

$("#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

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

预览.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

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

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掉了一张，上传，目录下面出现了两张

GIF.gif

下面给一下完整的 html代码和php代码

Document

.btn {

border-radius: 0px;

font-weight: 100;

cursor: pointer;

display: inline-block;

padding: 5px;

font-size: 14px;

font-family: '微软雅黑'

}

.btn-primary {

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;

}

选择图片

上传

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

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

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

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 {

}

})

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

$url = $newname.'.'.$type;

$upload=move_uploaded_file($file,$url);

}

}