选择图片后,页面回显图片

<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" >        </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‘/>");})
时间: 2024-10-04 00:42:31

选择图片后,页面回显图片的相关文章

使用Jersey构建图片服务器 有回显图片功能

1.前台界面代码 <form id="jvForm" action="add.do" method="post" enctype="multipart/form-data"> <table> <tr> <td width="20%" class="pn-flabel pn-flabel-h"></td> <td width

springboot项目图片上传,回显;使用外部静态资源路径回显图片

//前端图片是Base64字符串形式传递图片参数:需要用Base解密,写入到本地磁盘中 public String upload(String string){ 解析图片(Base64): response.setHeader("Access-Control-Allow-Origin","*"); // 第二个参数填写允许跨域的域名称,不建议直接写 "*" response.setHeader("Access-Control-Allow

Struts2 模型驱动及页面回显

* 要从页面中获取表单元素的值,需要在动作类中声明与页面元素同名的属性.导致动作类中既有javabean又有业务方法.        * 将javabean和业务方法进行分离:        * 将重新创建一个javabean,将javabean的内容放置其中.        * 动作类action中只留业务方法        * 在动作类中声明的javabean无法从页面中获取同名的属性        * 需要使用struts2框架提供"ModelDriven(模型驱动)"     

ueditor1.4.3jsp版成功上传图片后却回显不出来与在线管理显示不出图片的解决方案

这是因为路径问题,可以在jsp/config.json这个文件去改路径 通过“imageUrlPrefix”与“imagePathFormat”这两个属性去拼凑路径. “imageUrlPrefix”是前缀的意思 如:我遇到的问题是图片回显地址为: http://localhost:8080/ueditor/jsp/upload/image/...... 而正确的地址是: http://localhost:8080/Spring_3100_Registration_9_bootstrap/ued

Vue -- element-ui el-table 点击tr项页面跳转,返回后缓存回显点击项

页面跳转反显 点击table tr项后,页面跳转到下级页面,返回回显搜索条件.当前页码.并将点击项select选中.滚动条也被记录回显跳转时滚动的位置 思路: 页面临时缓存我选择使用sessionStorage,点击tr行将搜索条件和页码,点击行的id进行存储 data(){ return { } } setSessionStore (name, content) { if (!name) return if (typeof content !== 'string') { content = J

子类页面回显数据

在父类页面进行数据回显采用: var body = layui.layer.getChildFrame('body', index);body.find("#mid").val(data.id);body.find(".twoSelect select").val(data.parentCode);layui.form.render();layui.form.render("select"); 在子类页面进行数据回显采用: 父类页面: var i

SpringMVC的页面回显

在controller中添加 @RequestMapping("list") public String list(Model model){ List<User> list = new ArrayList<User>(); User user1 = new User(); user1.setId(1); user1.setUsername("oyb"); user1.setPassword("123"); user1.s

图片上传并回显后端篇

图片上传并回显后端篇 我们先看一下效果 继上一篇的图片上传和回显,我们来实战一下图片上传的整个过程,今天我们将打通前后端,我们来真实的了解一下,我们上传的文件,是以什么样的形式上传到服务器,难道也是一张图片?等下我们来揭晓 我们在实战开始前呢,我们先做一下准备工作,比如新建一个java web工程,如果你不懂这个的话,那我建议你先学一下Javaweb,可以去我的公众号找一下这方面的教程.我们就给我们的工程起名为UpImg,我们再给他建一个web包和util包,再把我们以前前端做的图片回显的代码拷

图片上传并回显Ajax异步篇

图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormData对象 "FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用.如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()用来