zoukankan      html  css  js  c++  java
  • js多图上传展示和删除

    html部分

     <button class="btn btn-info" for="file">请选择文件</button>
    <input type="file" id="file" name="file" multiple='multiple' class="hidden"  onchange="showPicture(this)"/>
    <div id="imgBox" class="form-group">

    js部分

    var imgSrc = []; //图片路径
        var imgFile = []; //文件流
        var imgName = []; //图片名字
        var imgBox=$('#imgBox');
        function showPicture(imgF){
            var fileList=imgF.files;
            for(var i = 0; i < fileList.length; i++){
                        var imgSrcI = getObjectURL(fileList[i]);
                        imgName.push(fileList[i].name);
                        imgSrc.push(imgSrcI);
                        imgFile.push(fileList[i]);
                }
                addNewContent(imgBox);
      }
    //图片展示
    function addNewContent(obj) {
        $(imgBox).html("");
        for(var a = 0; a < imgSrc.length; a++) {
            //console.log(imgSrc);
            var oldBox = $(obj).html();
            $(obj).html(oldBox + '<div class="imgContainer col-sm-4"><img width="100%" class="img-rounded" title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' ><span onclick="sc('+a+')">删除</span></div>');
        }
    }
    //图片预览路径
    function getObjectURL(file) {
        var url = null;
        if(window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if(window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if(window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    //删除
    function sc(index){
        
       imgSrc.splice(index,1);
       index='';
       addNewContent(imgBox);
       
    }

    效果如下

  • 相关阅读:
    sdnu 1513 字符串翻转
    hdu-1559 最大子矩阵(二维树状数组模板题)
    hdu-1556 树状数组
    1049.饭盒
    1092.校门外的树
    1012.区间合并
    1054.数独
    1175.开心的金明 01背包
    空格(Space)的ASCII码值是:32
    js为lable和div赋值
  • 原文地址:https://www.cnblogs.com/aSnow/p/8824815.html
Copyright © 2011-2022 走看看