H5---上传图片input，type=file

最新推荐文章于 2023-09-22 16:47:53 发布

原创最新推荐文章于 2023-09-22 16:47:53 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#H5 #multiple #选择多张图片上传

H5 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了在手机网页端使用H5实现多图选择及上传的功能，详细探讨了multiple属性在不同浏览器上的兼容性问题，并提供了限制上传数量的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传图片input，type=file

最近在外面做项目遇到了一个变态的需求，就是在手机网页端上传图片的时候，客户想一次性选择多张图片，注意是选择多张不是上传多张图片，在这里用到了H5的一个属性，multiple，在这里郑重说明，multiple这个属性，在pc端是可以的，但是在手机端，ios本机的浏览器是好用的，安卓方面，只有qq浏览器和chrome浏览器好用，其他的uc和本机自带的浏览器都不会出现选择多张的情况。在和客户沟通之后，放弃的选择多张的情况，可以做成每次选择一张，之后上传多张的情况。

之后还对上传数量做了限制，在这里大部分都封装了公共的方法，可以按照自己的业务酌情的修改。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
<div class="form-group">
    <div class="col-xs-8 col-sm-9">
        <div id="fileInputDiv">
            <input id="load" multiple="multiple" type="file" class="btn btn-primary" name="pictures[]" accept="image/**" onchange="upload(this.files,'name','name')"/>
        </div>

        <div id="name">
           <!-- <div class="imgList"><span class="remove">remove</span><img class="img" src="" style="width:100px;margin:0 5px 0 5px"></div>-->
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var imgArr = [];

    var imgList = {
        "name":5,
        "nameimg":0,
    }
    function upload(f,name,imgListName) {
        console.log(f);
        for (var i = 0; i < f.length; i++) {
            if(imgList[name+"img"]>=imgList[name]){
                alert("上传已经超过了文件数量");
                return ;
            }
            imgList[name+"img"]++;
            imgArr = [];
            var reader = new FileReader();
            reader.readAsDataURL(f[i]);
            imgArr.push[f];
            reader.onload = function(e) {
                var str = "<div class=\"imgList\"><span class=\"remove\" onclick=\"remove(this,'"+name+"')\">remove</span><img class=\"img\" src=\""+e.target.result+"\" style=\"width:100px;margin:0 5px 0 5px\"></div>";
                $('#'+imgListName).append(str);
            }
        }
    }
    function remove(obj,name){
        $(obj).parent().remove();
        if(imgList[name+"img"]>0){
            imgList[name+"img"]--;
        }

        var fileInputDiv = document.getElementById("fileInputDiv");
        var file = document.getElementById("load");
        if (file.outerHTML) {
            fileInputDiv.innerHTML = file.outerHTML;
        } else {
            file.value = "";
        }
    }

</script>

</html>