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

JS多图上传相比大家都会
但是上传到网页预览的时候，可能会进行筛选，删除一部分
操作file文件想必大家很少有试过吧
下面来说一下完整的实现方法

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

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

按钮.png

文件上传的 input太丑了 我们把他隐藏起来
当点击 选择图片按钮的时候 我们用

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

来触发Input的点击事件

<div>
    <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="display:none">
        <div class="gallery" id="gallery"></div>
    </form>
</div>
$("#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


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


GIF.gif

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
        .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;
          }
    </style>
</head>
<body>
<div>
    <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="display:none">
        <div class="gallery" id="gallery"></div>
    </form>
</div>
<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>

<?php        
    $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);
        }
    }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,402评论 6赞 499
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,377评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,483评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,165评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,176评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,146评论 1赞 297
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,032评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,896评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,311评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,413评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,008评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2赞 353

推荐阅读更多精彩内容

  • 基于html5的多图片上传
    基于html5的多图片上传 本文是建立在张鑫旭大神的多文图片传的基础之上.首先先放出来大神多图片上传的博客地址:h...
    cofuMaster阅读 9,200评论 0赞 13
  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,979评论 3赞 119
  • iOS动态更新
    iOS 可以使用本地库来加载代码 实现更新，只是需要将部分初始化写好； 这里有个问题，1.打包的库中，加载的资源文...
    暖羊羊_d603阅读 503评论 0赞 0
  • 你不会哭，所以也不会笑
    突然间就丢下了快乐的能力，也许是“”。 带小A吃了次她们家乡的炒米粉，用她的话说她竟然开心的快要飞起来。一顿心心念...
    乐活保定阅读 275评论 0赞 0
  • iOS项目的瘦身与加快编译速度
    随着开发的不断进行，我们的项目总会变得越来越大，而过大的占用用户的内存空间会对用户的留存造成一定的影响，所以我们总...
    Edgarss阅读 4,350评论 2赞 12