图片回显

<div>
  <img src="">
  <input type="file" name="name" value="上传图片">
</div>

$(function(){

$("input").change(function(){

  var obj = $(this);

  var file = this.files[0];

  //如果上传的不是图片就返回,去掉可以上传任意文件

  if(!/image\/\w+/.test(file.type)){

    alert(‘请确保文件类型为图像类型‘);

    return false;

  }

  var reader = new FileReader();

  reader.readAsDataURL(file);

  reader.onload = function(e){

    console.log(this.result);

    obj.siblings(‘img‘).attr(‘src‘,this.result);

  }

});

});

时间: 2024-10-12 11:55:15

图片回显的相关文章

Nginx实现图片回显

在全国项目峰会的时候,自己的项目因为上传的图片没回显还在纳闷怎么弄..... 现在知道了用Nginx反向代理就能够完成此功能. (一) 反向代理机制 业务需求: 用户上传的图片和用户请求图片的网址有差别. 磁盘路径: E:\zhangchaocai\2018\11\02\abc.jpg 虚拟路径: http://image.jt.com\2018\11\02\abc.jpg 如何将虚拟路径地址正确的映射到磁盘路径中??? (二) 反向代理说明 找到一个好用的画图软件,简单易用才是王道.FastS

百度WebUploader上传图片,图片回显编辑,查看

       编辑图片,可以删除上次上传的图片,可以新加上传图片 1.首选还是引入css和js(两个css,三个js) 自定义css .webuploader-container { position: relative; } .webuploader-element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px,1px,1px,1px);

关于JS将图片回显问题,将byte[]转化为流,信息填入input框内

1 <script> 2 3 var For_photo = [] 4 var normal_data = new Object(); 5 var Userinfo = JSON.parse(sessionStorage.getItem('Userinformation')); 6 for (var prop in Userinfo) { 7 //$("[name='" + prop + "']").val(ForeignTeachers[prop]);

jquery html5 上传图片并且 图片回显

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="te

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

如何用input标签上传多个图片并回显

本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file标签非常丑,我们美化一下它,不会的可以百度一下,就是外面套个盒子,设置input的opacity为0,然后外面的盒子设计成我们喜欢的样式即可,我就随便做了一下. 还是放一下源码,只谈效果,不放源码的都是耍流氓 这是body <body> <div class="uploadImgB

图片上传并回显后端篇

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

使用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

图片上传并回显Ajax异步篇

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