input file 上传图片并实现实时预览

前言

用普通的html的 标签是不能实现实时预览功能的,获取表单的值可以得到图片所在路径:C:\fakepath\test.png,如果将它直接赋值给img标签的href属性,会报错:Not allowed to load local resource(不允许加载本地资源)。

功能实现

可以通过file标签和js的 FileReader 接口来实现此功能:

  • 把选择的图片文件调用readAsDataURL方法
  • 把图片数据转成base64字符串形式显示在页面上
  • 给a标签定义 href属性 和 download=”文件名.后缀名”,就可以实现点击下载的功能
<input type="file" id="uploadImg" onchange="xmTanUploadImg(this)">
<img src="" alt="" id="selectImg">
<a href="javascript:void()" download="picture.jpg" id="xmTanDownload">点此下载a>

<script>
    function xmTanUploadImg(obj) {
        var file = obj.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {    //成功读取文件
            var img = document.getElementById("selectImg");
            img.src = e.target.result;   //或 img.src = this.result / e.target == this

            //实现点击下载图片功能
            var xmTanDownload =  document.getElementById("xmTanDownload");
            xmTanDownload.setAttribute("href", e.target.result);  //给a标签设置href
        };
    }
script>

效果图

input file 上传图片并实现实时预览_第1张图片

你可能感兴趣的:(javascript,经验技巧)