FileReader多图片上传

最新推荐文章于 2023-08-03 10:57:00 发布

一位不愿透露姓名的大英俊

最新推荐文章于 2023-08-03 10:57:00 发布

阅读量1.9k

点赞数 1

分类专栏：工作日记文章标签：图片上传图片 FileReader

本文链接：https://blog.csdn.net/wjy199506/article/details/62046093

版权

工作日记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!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>

一位不愿透露姓名的大英俊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FileReader多图片上传

<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <title> 上传多张图片</title> <style type="text/css"> .img-div{ float: left; line-height: 1; margin
复制链接

扫一扫