美文网首页
图片加载预览js

图片加载预览js

作者: 曾祥辉 | 来源:发表于2018-02-07 14:21 被阅读0次

//html

<form id="imgForm">  
    <input type="file" class="addBorder">  
    <br/>  
    <button type="button" onclick="loadImg()">获取图片</button>  
</form> 

//js

function loadImg(){  
    //获取文件  
    var file = $("#imgForm").find("input")[0].files[0];  
  
    //创建读取文件的对象  
    var reader = new FileReader();  
  
    //创建文件读取相关的变量  
    var imgFile;  
  
    //为文件读取成功设置事件  
    reader.onload=function(e) {  
        alert('文件读取完成');  
        imgFile = e.target.result;  
        console.log(imgFile);  
        $("#imgContent").attr('src', imgFile);  
    };  
  
    //正式读取文件  
    reader.readAsDataURL(file);  
}  

相关文章

  • 图片加载预览js

    //html //js

  • 2017-02-19

    图片懒加载 效果预览 瀑布流布局 效果预览 木桶布局 效果预览 无限轮播 效果预览 原理 图片懒加载的原理当网页上...

  • 网页图片放大工具插件

    图片预览插件 引入JS CSS JS代码

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

  • R可视化——图片颜色提取及应用(以jpg格式图片为例)

    设置工作目录、加载R包 加载图片并提取颜色 1、图片加载及预览——jpg格式图片加载主要基于imager包中的lo...

  • 懒加载和预加载

    1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加载:提前加载图片...

  • 2018-07-27

    JS实现图片预加载

  • dropify.js实现文件预览

    dropify.js 实现文件预览 目的 选择框选中文件后,实现预览按钮小窗口打开图片/pdf文件 js html...

  • 图片懒加载

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预...

  • h5调用摄像机拍照或选择图片并预览

    html部分 js部分 图片预览依赖HTML5的FileReader

网友评论

      本文标题:图片加载预览js

      本文链接:https://www.haomeiwen.com/subject/sixsoxtx.html