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. 2.openldap安装

    1.安装步骤如下 获取软件包 安装软件包(rpm或者源码编译) 生产openldap配置文件及数据库文件 配置 添加目录树条目 加载slapd进程 验证 2.所需安装包说明 openldap,open ...

  2. 一个简单的rest_framework demo

    models.py from django.db import models class UserInfo(models.Model): username = models.CharField(max ...

  3. java面向对象的有序数组和无序数组的比较

    package aa; class Array{ //定义一个有序数组 private long[] a; //定义数组长度 private int nElems; //构造函数初始化 public ...

  4. 王者荣耀交流协会——第7次Scrum会议

    照片由刘耀泽同学拍摄 ,王露芝同学(外援)没有参加本次会议. 要求2 : 时间跨度:2017年10月19日 15:05 - 15:20 共计15分钟 要求3 : 地点:计算机楼107教室 要求4 : ...

  5. Eclipse添加Jquery和javascript的智能提示

    使用Eclipse写Jquery和Javascript代码的时候,是没有智能提示的.我们可以使用一个插件来解决这个问题. 安装完成后,Eclipse会自动重启.重启之后,我们在项目上右键,   根据自 ...

  6. jQuery之属性

    1. 操作任意属性 attr() 操作非布尔值的 removeAttr() prop() 操作布尔值的2. 操作class属性 addClass() 添加class属性 removeClass() 移 ...

  7. PictureBox使用异常

    PictureBox的使用 代码: 显示部分 当我切换不同位置之间的照片时,出现这种问题: 但是当我代码改成下面的代码时,则错误消除 但我并不清楚原因

  8. TP中CURD操作

    CURD操作 CURD操作也就是模型操作数据表的基本操作.C(Create).U(Update).R(Read).D(Delete)操作就是增删改查操作. 6.1.增加操作 回想一下在mysql中增加 ...

  9. Windows搭建Log4Net+FileBeat+ELK日志分析系统过程

    参考博客:http://udn.yyuap.com/thread-54591-1-1.html ; https://www.cnblogs.com/yanbinliu/p/6208626.html ; ...

  10. 当使用listIterator进行迭代时候 list的迭代器可以在创建迭代器对象后 添加数据 但打印的时候不显示添加后的数据。 collection 的iterator迭代器不能添加数据 。list的对象与collection的实例对象都不能在创建迭代器后添加数据 list的迭代器保存的是循环前的数据长度