上传

最新推荐文章于 2024-07-25 11:52:08 发布

learn-cium

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量139

点赞数 1

分类专栏： js 文章标签： html

本文链接：https://blog.csdn.net/weixin_43841245/article/details/90666251

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

多图上传

1.点击上传按ctrl 键可以选择多张图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #imgContainer span {
        display: inline-block;
        width: 300px;
        height: 300px;
        float: left;
        margin-left: 10px;
    }
    </style>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
    <input id="upload" type="file" multiple="multiple">
    <div id="imgContainer"></div>
    <script type="text/javascript">
    $('#upload').change(() => {
        $("#imgContainer").empty()
        const fileList = Array.from(document.getElementById('upload').files)
        const newFileList = fileList.filter((item) => {
            if (/(.jpg|.png)$/.test(item.name)) {
                return item
            }
        })
        newFileList.forEach((item, index) => {
            var src = window.URL.createObjectURL(item)
            var span = document.createElement("span")
            span.style.background = "url(" + src + ") center no-repeat"
            span.style.backgroundSize = "cover"
            $('#imgContainer').append(span)
        })
    })
    </script>
</body>
</html>

2.多按钮上传

   <body class="login-layout Reg_log_style" id="loginstyle">  
<ul class="iconlist">
            <li style="">
                <div class="imgs" onclick="document.getElementById('img_1').click()">选择图片</div>
                    <input type="file" class="img" name="img[]" id="img_1" accept="image/*" onchange="l(this)" width="150px" />             <div width="150px"><img src="" width="150px" id="1"/></div>                  
             </li>
            <li><div class="imgs" onclick="document.getElementById('img_2').click()">选择图片</div>
                    <input type="file" class="img" name="img[]" id="img_2" accept="image/*" onchange="l(this)"/>
                    <<div width="225px"><img src="" width="150px" id="2"/></div>
            </li>
            <li><div class="imgs" onclick="document.getElementById('img_3').click()">选择图片</div>
                    <input type="file" class="img" name="img[]" id="img_3" accept="image/*" onchange="l(this)"/>
                     <li><div width="225px"><img src="" width="150px" id="3"/></div></li>
            </li>
            <li>
                <div class="imgs" onclick="document.getElementById('img_4').click()">选择图片</div>
                    <input type="file" class="img" name="img[]" id="img_4" accept="image/*" onchange="l(this)"/>
                   <li><div width="225px"><img src="" width="225px" id="4"/></div></li> 
            </li>
            <li>
                <div class="imgs" onclick="document.getElementById('img_5').click()">选择图片</div>
                    <input type="file" class="img" name="img[]" id="img_5" accept="image/*" onchange="l(this)"/>
                     <li><div width="225px"><img src="" width="225px" id="5"/></div></li>
                </li>
            <li>
                <div class="imgs" onclick="document.getElementById('img_6').click()">选择图片</div>
                    <input type="file" class="img" name="img[]" id="img_6" accept="image/*" onchange="l(this)"/>
                    <li><div width="225px"><img src="" width="225px" id="6"/></div>
                    </li>
        </li>
          </ul>      </body>
</html>
            <script type="text/javascript">
        function l(evn){
            var name = event.target.files[0].name;//获取上传的文件名
            var divObj= $(evn).prev()  //获取div的DOM对象
            $(divObj).html(name) //插入文件名
            var id = $(evn).attr('id');//获取id
            var num = id.substr(4,1)
            var file = event.target.files[0];
            if (window.FileReader) {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                //监听文件读取结束后事件
                reader.onloadend = function (e) {
                    $("#"+num).attr("src",e.target.result);    //e.target.result就是最后的路径地址
                };
            }
        }
    </script>

//layui  上传
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/admin/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>上传多张图片</legend>
</fieldset>
 
<div class="layui-upload">
  <button type="button" class="layui-btn" id="test2">多图片上传</button> 
  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
    预览图：
    <div class="layui-upload-list" id="demo2"></div>
 </blockquote>
</div>         
<script src="/static/admin/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  //多图片上传
  upload.render({
    elem: '#test2'
    ,url: '/upload/'
    ,multiple: true
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
      });
    }
    ,done: function(res){
      //上传完毕
    }
  });
  
});
</script>

</body>
</html>

learn-cium

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上传

多图上传1.点击上传按ctrl 键可以选择多张图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #imgContainer span ...
复制链接

扫一扫

专栏目录