您的位置:时时app平台注册网站 > web前端 > input type=file 选用图片况且达成预览效果【彩世界

input type=file 选用图片况且达成预览效果【彩世界

2019-11-28 05:18

HTML代码

<body>
    <div id="box">
        <img id="imgshow" src="" alt="彩世界网址 1"/>
    </div>
    <div id="pox">
        <input id="filed" type="file" accept="image/*"/>
    </div>
</body>

通过<input />标签,给它指定type类型为file,可提供文件上传;

规定只可上传图片,且可以选择多个文件 

<input type="file" accept="image/*" multiple="multiple"/>

 

当然,直接一个input  type=file  只能选择上传的文件/资源,如果我们需要在选择图片之后,在当前页面实现预览效果,那么我们可以如下方式来实现

multiple:规定是否可以选择多个文件;

JS代码

<script>
        //在input file内容改变的时候触发事件
        $('#filed').change(function(){
        //获取input file的files文件数组;
        //$('#filed')获取的是jQuery对象,.get(0)转为原生对象;
        //这边默认只能选一个,但是存放形式仍然是数组,所以取第一个元素使用[0];
            var file = $('#filed').get(0).files[0];
        //创建用来读取此文件的对象
            var reader = new FileReader();
        //使用该对象读取file文件
            reader.readAsDataURL(file);
        //读取文件成功后执行的方法函数
            reader.onload=function(e){
        //读取成功后返回的一个参数e,整个的一个进度事件
                console.log(e);
        //选择所要显示图片的img,要赋值给img的src就是e中target下result里面
        //的base64编码格式的地址
                $('#imgshow').get(0).src = e.target.result;
            }
        })
</script>

* *以上js代码中有使用到jQuery,因此要引入jQuery文件*

* *

css样式文件

  <style>
        #box{
            width: 300px;
            height: 300px;
            border: 2px solid #858585;
        }
        #imgshow{
            width: 100%;
            height: 100%;
        }
        #pox{
            width: 70px;
            height: 24px;
            overflow: hidden;
        }
    </style>

accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*;

本文由时时app平台注册网站发布于web前端,转载请注明出处:input type=file 选用图片况且达成预览效果【彩世界

关键词: