点击上传图片并显示文件名和图片及获取input file的值和路径

最新推荐文章于 2024-08-12 16:30:53 发布

置顶 robin_sky

最新推荐文章于 2024-08-12 16:30:53 发布

阅读量3.2w

点赞数 6

分类专栏：前端文章标签： web html 前端

本文链接：https://blog.csdn.net/robin_sky/article/details/80844401

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

原本的input type='file' 样式真的很丑，毫无美感而言，一直想写一个点击图片就显示的界面，现在终于研究出来了。

原本的input type='file'样式：

改变后的样式：

样式代码：

    <style type="text/css">
        li{list-style-type: none;margin-right: 10px;}
	 	ul li{float: left;}
        .img{opacity:0;}
        .imgs{border:1px solid #78C3F3;background: #AADFFD;color: #1E88C7;border-radius: 4px;text-align:center;cursor: pointer;
            padding:10px;}
        
    </style>

前端代码：

<ul class="iconlist">
            <li><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)"/></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)"/></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>
            <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>
            <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>
            <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>
        </ul>

显示图片的代码：

<ul class="iconlist">
                <li><div width="225px"><img src="" width="225px" id="1"/></div></li>
                <li><div width="225px"><img src="" width="225px" id="2"/></div></li>
                <li><div width="225px"><img src="" width="225px" id="3"/></div></li>
                <li><div width="225px"><img src="" width="225px" id="4"/></div></li>
                <li><div width="225px"><img src="" width="225px" id="5"/></div></li>
                <li><div width="225px"><img src="" width="225px" id="6"/></div></li>
            </ul>

JS代码：

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

效果如下：