zoukankan      html  css  js  c++  java
  • 选择图片后,页面回显图片

    <div class="form-group form-group-lg">
    <label class="col-xs-1 control-label">封面:</label>
    <div class="col-xs-11 clearfix">
    <div class="pull-left js-upload-img-wrapper">
    <img class="js-upload-img" src="/img/default.jpg"
    onerror="this.src='/img/default.jpg'" height="140" width="260" alt="">
    </div>
    <span style="margin: 50px 10px; float: left;">(点击图片上传封面)</span>
    <input type="file" class="js-upload-img-trigger hidden" name="files" accept="image/jpeg, image/jpg, image/png, image/git">
    </div>
    </div>
    
    
    
    
    
    
    // 图片文件提交
    $('.js-upload-img-wrapper').on('click', '.js-upload-img',function () {
    $('.js-upload-img-trigger').click();
    });
    $('.js-upload-img-trigger').change(function(event){
    var node = event.target;
    var imgURL = "";
    try{
    var file = null;
    if(node.files && node.files[0] ){
    file = node.files[0];
    }else if(node.files && node.files.item(0)) {
    file = node.files.item(0);
    }
    //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
    try{
    imgURL = file.getAsDataURL();
    }catch(e){
    imgURL = window.URL.createObjectURL(file);
    }
    }catch(e){
    if (node.files && node.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
    imgURL = e.target.result;
    };
    reader.readAsDataURL(node.files[0]);
    }
    }

    $(".js-upload-img-wrapper").html("<img class='js-upload-img' src='"+imgURL+ "' height='140' width='260'/>");
    })
  • 相关阅读:
    定义扩展点,实现发布订阅机制
    JS阻止事件冒泡
    Virtualbox安装黑苹果
    外部Tomcat使用Java热部署利器JRebel
    在Windows server 2016上使用docker
    Tomcat加载web.xml文件的顺序详解
    IDEA反编译整个jar包
    java集合类的继承结构
    利用BodyTagSupport创建带标签体的自定义标签
    jquery实现简单弹出框
  • 原文地址:https://www.cnblogs.com/handsomeBoys/p/7800115.html
Copyright © 2011-2022 走看看