html

                         <div>
<label class="imgMark">说明:</label>
<div class="erWeiMa">
<img src="" class="imgShow" >
<img src="upload.png">
<input type="file" class="file" >
</div>
</div>

js

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

    $(this).prev().css("display","none");
$(this).prev().prev().css("display","block");//获取上传的图片信息
var file=$(this).get(0).files[0];
//创建用来读取此文件的对象
var reader=new FileReader();
//使用该对象读取此文件的方法函数
reader.readAsDataURL(file);
//读取文件成功后执行的方法函数
reader.onload=function(e){
$(".imgShow").attr("src",e.target.result)
}
});

input file 图片上传展示重新上传的更多相关文章

  1. input file 图片上传

    使用第三方:jquery.ajaxfileupload.jsinput中的name根据后端来定 <form method="post" enctype="multi ...

  2. form input file 图片上传360IE兼容问题

    <form action="" class="form-box" class="form_box" enctype="mul ...

  3. input file图片上传

    <div class="div-title"> <h5>图片上传</h5> <div class="photo-box" ...

  4. input file图片上传预览

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

  5. input file图片上传预览效果

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

  6. 上传图片预览JS脚本 Input file图片预览的实现示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js获取 input file 图片缩略图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 一段上传图片预览JS脚本,Input file图片预览的实现

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...

  9. 根目录97 <input file>标签,把图片上传到服务器(跟增删改查一起实现)

    首先来个简单的html页面: enctype="multipart/form-data" encoding="multipart/form-data" acti ...

随机推荐

  1. AutoCAD 自动管理字体插件[使用ObjectARX C++]

    概述: 使用AutoCAD的过程中,我们常常因为缺失字体而烦恼,本插件就是为了解决这个问题. 插件采用WEB服务器 + CAD插件方式.WEB服务器使用Python编写,部署在百度BAE上:CAD插件 ...

  2. [笔记] postgresql 流复制(streaming replication)

    基本环境说明: os:FreeBSD 9.3 postgresql version: master:192.168.56.101 standby:192.168.56.102 安装过程略,基于pkg包 ...

  3. ES6中Class的继承关系

    es5实现中,每个对象都有__proto__属性(也就是关系图中[[prototype]]属性),指向对应的构造函数的prototype.Class 作为构造函数的语法糖,同时有prototype属性 ...

  4. 王者荣耀交流协会--第3次Scrum会议

    Scrum master:王玉玲 要求1:工作照片 要求2:时间跨度:2017年10月15号  6:00--6:24  共计24min要求3:地点:传媒西楼204,会议室要求4:立会内容:1.从昨日会 ...

  5. 《JavaScript》JavaScript的名字和版本

    语言标准版本名字:ECMAScript(ECMA是欧洲计算机制造协会,据说可能是专门做标准的,除了JavaScript遵循这个标准以外,还有XX....)    Jscript(IE对该语言实现版本的 ...

  6. action访问servlet的API并且获取到MAP或者httpServlet类型的application,session,request

    public class testAction3 extends ActionSupport { private Map<String,Object> request; private M ...

  7. Optimized Flow Migration for NFV Elasticity Control

    NFV弹性控制中的流迁移优化 ABSTRACT 基于动态创建和移除网络功能实例,NFV在网络功能控制上有很大的弹性.比如,网络功能和并,网络功能拆分,负载均衡等等. 那么为了实现弹性控制,就需要网络流 ...

  8. 【week8】psp~~进度条

    本周psp 项目 内容 开始时间 结束时间 中断时间 净时间 10月7日 星期一 论文 看生物信息方面的论文 10:00 12:00 5 115 写代码 注册信息从前台传入servlet 18:00 ...

  9. php过滤字符串

    addslashes(); stripslashes(); //对数据库教程操作时,转义特殊字符 定义:addslashes() 函数在指定的预定义字符前添加反斜杠. 语法:addslashes(st ...

  10. 服务器控件的异步请求——UpdatePanel和ScriptManager

    aspx文件里面有以下一段代码 <body> <form id="form1" runat="server"> <div> ...