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

原本的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>

效果如下:
 

注:js方法中用了jQuery的方法,需引入jQuery 

  • 5
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值