zoukankan      html  css  js  c++  java
  • <input type="file">图片上传时,先预览

    <label>
        <input type="file" id="upload">
    </label>    
    

    js

    $("#upload").on('change',function(){
            var file = this.files[0];
            console.log(this.files);
            var reader = new FileReader();
    
            //读取文件过程方法
            reader.onloadstart = function (e) {
                console.log("开始读取....");
            }
            reader.onprogress = function (e) {
                console.log("正在读取中....");
            }
            reader.onabort = function (e) {
                console.log("中断读取....");
            }
            reader.onerror = function (e) {
                console.log("读取异常....");
            }
            reader.onload = function (e) {
                console.log("成功读取....");
                var img = "<img src='"+e.target.result+"'>";
                $("#upload").parent().before(img);
                console.log(e.target.result);
            }
    
            reader.readAsDataURL(file)
        })
    

     ####在input框之前插入预览图片

  • 相关阅读:
    数据库优化
    List,map,Set区别
    ID选择器
    最简单的添加删除行操作
    JQ2
    最简单的JQ实现
    20180416
    一行细分的HTML写法
    out参数的使用
    结构的使用
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/10299490.html
Copyright © 2011-2022 走看看