input不可编辑|input type=file 选择图片并且实现预览效果的实例

【www.bbyears.com--网页配色】

通过标签，给它指定type类型为file，可提供文件上传；

accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/*；

multiple：规定是否可以选择多个文件；

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

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

HTML代码

css样式文件

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

本文来源：http://www.bbyears.com/wangyezhizuo/139914.html