input type=file 选择图片并且实现预览效果的实例

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

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

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

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

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

HTML代码

css样式文件

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

JS代码

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

这篇input type=file 选择图片并且实现预览效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。