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. Intense Heat(前缀和或尺取)

    The heat during the last few days has been really intense. Scientists from all over the Berland stud ...

  2. 王者荣耀交流协会 - 第6次Scrum会议(第二周)

    Scrum master :刘耀泽 工作照片: 照片由刘耀泽(本人)拍摄,组内成员刘耀泽,高远博,王磊,王玉玲,王超,任思佳,袁玥全部到齐. 时间跨度: 2017年10月25日 17:00 — 17: ...

  3. Java 学习笔记 ------第五章 对象封装

    本章学习目标: 了解封装的概念与实现 定义类.构造函数与方法 使用方法重载与不定长度自变量 了解static方法 一.Java封装概念 在面向对象程式设计方法中,封装(英语:Encapsulation ...

  4. 查看dll依赖项

    win7 系统: 开始-->所有程序->vs2012文件夹->vs tools->对应的命令提示符 输入命令: dumpbin /dependents 你的文件(可以是exe, ...

  5. iframe高度自适应的6个方法

    原文链接:http://caibaojian.com/iframe-adjust-content-height.html JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看 ...

  6. HDU 4489 The King’s Ups and Downs dp

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4489 The King's Ups and Downs Time Limit: 2000/1000 ...

  7. ASP.NET 文档

    标题:ASP.NET 文档 地址:https://docs.microsoft.com/zh-cn/aspnet/index#pivot=core&panel=core_overview 标题 ...

  8. 判断字符串中是否存在的几种方案:string.indexof、string.contains、list.contains、list.any几种方式效率对比

    我们在做项目时,可能会遇到这样的需求,比如判断,1,2,3,33,22,123, 中是否存在,3,. var str=",1,2,3,33,22,123,"; 一般有几种方式: 1 ...

  9. 第200天:js---常用string原型扩展

    一.常用string原型扩展 1.在字符串末尾追加字符串 /** 在字符串末尾追加字符串 **/ String.prototype.append = function (str) { return t ...

  10. 第96天:CSS3 背景详解

    一.背景大小 background: url("images/bg.jpg") no-repeat;控制背景的大小1.具体数值background-size: 500px 500p ...