js文件上传前的预览和删除实例代码

js文件上传前的预览和删除实例代码,具体如下: !DOCTYPE htmlhtml lang="en" head meta charset="UTF-8" / meta http-equiv="X-UA-Compatible" content="IE=edge" / meta name="viewport" content="width=device-width, initial-scale=1.0" / title文件上传
js文件上传前的预览和删除实例代码,具体如下:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>文件上传预览和删除</title>
        <style>
            #img-box{display: flex;padding: 20px 0;}
            #img-box .img-item{width: 150px;height: auto;overflow: hidden;margin-right: 10px;}
            #img-box .img-item img{width: 100%;height: 100px;}
            #img-box .img-item .delete-img{color: #f00;}
        </style>
    </head>
    <body>
        <div class="publish_files">
            <div class="input-file-box">
                <span>点击上传图片</span>
                <input
                    type="file"
                    accept=".png,.jpg,.jpeg,image/png,image/jpg,image/jpeg"
                    name=""
                    id="uploadfile"
                    multiple
                />
            </div>
            <div id="img-box"></div>
        </div>
    </body>
</html>
<script>
    var div;
    //创建FormData对象
    var allfileList = new FormData(); 
    // 当用户上传时触发事件
    var input = document.getElementById("uploadfile");
    input.onchange = function () {
        readFile(this);
    };
    // 处理图片并添加都dom中的函数
    let sortNum = 0; //标记文件索引
    var readFile = function (obj) {
        // 获取文件转成真数组(不转也可以,转了有其它妙用,比如排序)
        fileList = Array.from(obj.files);
        // 对文件组进行遍历,可以到控制台打印出fileList去看看
        for (var i = 0; i < fileList.length; i++) {
            // 创建FileReader对象
            var reader = new FileReader();
            // 使用readAsDataURL方法读取文件对象
            reader.readAsDataURL(fileList[i]);
            // 当文件读取成功时执行的函数
            let thisfile = fileList[i];
            reader.onload = function (e) {
                allfileList.append(`file${sortNum}`, thisfile); //添加队列中
                div = document.createElement("div");
                div.className = 'img-item'
                div.innerHTML = `<span style='display:none;'>${sortNum++}</span><img src="${this.result}" /><a class="delete-img" onclick='delFile(this)'>删除</a>`;
                // this.result获取图片本地地址,进行预览;
                document.getElementById("img-box").appendChild(div);
                // html中添加元素,方便预览
            };
        }
    };
    function delFile(event) {
        // 文件标识
        let fileNum = event.parentElement.getElementsByTagName("span")[0].innerHTML;
        // 删除文件列表中的文件
        allfileList.delete(`file${fileNum}`);
        // 删除页面上的元素
        document.getElementById("img-box").removeChild(event.parentElement);
        // 剩余的文件
        allfileList.forEach((value, key) => {
            console.log(key, value);
        });
    }
</script>
 
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

var pattern=/[`~!@#$^\-*()=|{}':;',\\\[\]\.\/?~!@#¥……*()——|{}【】';:""'。,、?\s]/g; //string = string.replace(pattern,""); var Str = '替换?字*符串/中的所\有特"殊:字符(包含空|格' var out = Str.replace(pattern,""); alert(out)
需求是模板字符串中不允许出现script 标签、不允许有javascript: 和 .js 文件引用,主要方法如下: clearScriptTag (str) { const reg = /script[^]*([\S\s]*?)\/script/gim; // 清除标签内 相关 xss 安全代码 const reg1 = /javascript:/gim; const reg2 = /
js Replace全部替换字符用法实例代码,替换1次和多次,主要是正则表达式 var r= "1\n2\n3\n";//将字母\n替换成分号alert(r.replace("\n",";"));//结果:1;2\n3\n 只替换了第一个var r= "1\n2\n3\n";//将字母\n替换成分号alert(r.replace(/\n/g, ";"));//结果
JS获取当前时间(年月日时分秒)的实例代码,详细代码如下: p id="time"/pscriptvar time = document.getElementById("time") function show() {let date = new Date();let year = date.getFullYear(); //获取当前年份let mon = date.getMonth() + 1; //获取
js输出当前日期和时间的实例代码,具体实例代码如下,有兴趣的朋友可以尝试运行下。 !doctype htmlhtml lang="en" head meta charset="UTF-8" title获取当前时间/title /head body script type="text/javascript" /** *获取当前时间 *format=1精确到天 *forma