FileReader多图片上传

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wjy199506/article/details/62046093
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title> 上传多张图片</title>
    <style type="text/css">
        .img-div{
            float: left;
            line-height: 1;
            margin-left: 5px;
            overflow: hidden;
        }

    </style>
</head>
<body>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
    //选择图片,马上预览  
    function xmTanUploadImg(obj) {

        var fl=obj.files.length;
        for(var i=0;i<fl;i++){
            var file=obj.files[i];
//            判断图片
            if(!/image\/\w+/.test(file.type)){
                alert('请上传图片!');
                return false;
            }
            var reader = new FileReader();
            //读取文件过程方法
            reader.onerror = function (e) {
                console.log("读取异常....");
            }
            reader.onload = function (e) {
                var imgstr='<img style="width:100px;height:100px;" src="'+e.target.result+'"/>';
                var oimgbox=document.getElementById("imgboxid");
                var ndiv=document.createElement("div");//创建div节点

                //限制上传的图片数
                var a=$('#imgboxid>div').length;
                if(a<5){
                    ndiv.innerHTML=imgstr;
                    ndiv.className="img-div";
                    oimgbox.appendChild(ndiv);
                }else{
                    alert('最多5张图片');
                }
            }
            reader.readAsDataURL(file);
        }

    }
</script>
    <input type="file" id="xdaTanFileImg"  multiple="multiple"  name="fileAttach" onchange="xmTanUploadImg(this)"/>
    <!--图片显示位置-->
    <div class="img-box" id="imgboxid">
    </div>
</body>  
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页