整理几个js上传多张图片的效果

时间：2022-02-05 12:25:58

一、普通的上传图片，张数不限制

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

    <title>上传多张图片</title>

    <style type="text/css">

        .img-div{

            border: 1px solid #ddd;

            border-radius: 100%;

            float: left;

            line-height: 1;

            margin-left: 5px;

            overflow: hidden;

        }

    </style>

</head>

<body>

<script type="text/javascript">

    //选择图片，马上预览

    function xmTanUploadImg(obj) {

        var fl=obj.files.length;

        for(var i=0;i<fl;i++){

            var file=obj.files[i];

            var reader = new FileReader();

            //读取文件过程方法

            reader.onloadstart = function (e) {

                console.log("开始读取....");

            }

            reader.onprogress = function (e) {

                console.log("正在读取中....");

            }

            reader.onabort = function (e) {

                console.log("中断读取....");

            }

            reader.onerror = function (e) {

                console.log("读取异常....");

            }

            reader.onload = function (e) {

                console.log("成功读取....");

                var imgstr='<img style="width:100px;height:100px;" src="'+e.target.result+'"/>';

                var oimgbox=document.getElementById("imgboxid");

                var ndiv=document.createElement("div");

                ndiv.innerHTML=imgstr;

                ndiv.className="img-div";

                oimgbox.appendChild(ndiv);

            }

            reader.readAsDataURL(file);

        }

    }

</script>

<form id="form">

    <input type="file" id="xdaTanFileImg"  multiple="multiple"  name="fileAttach" onchange="xmTanUploadImg(this)"/>

    <div class="img-box" id="imgboxid"></div>

    <div id="xmTanDiv"></div><br/>

    <div id="errordiv" style="margin-top:15px;width:100%;text-align:center;">

</div>

</form>

</body>

二、限制图片张数、图片大小、图片宽高、删除图片

整理中...

相关文章