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. nginx原声方法按照每天日志切割保存

    首先配置日志变量,然后配置日志 在/etc/nginx/conf.d/default.conf 配置变量 server{ if ($time_iso8601 ~ "^(\d{4})-(\d{ ...

  2. Coin Game

    Problem Description After hh has learned how to play Nim game, he begins to try another coin game wh ...

  3. python中 try、except、finally 的执行顺序

        def test1(): try: print('to do stuff') raise Exception('hehe') print('to return in try') return ...

  4. our team

    今天向大家介绍一下我们的团队,首先我们的团队叫“吉祥三宝”当然我们的三宝不是亲子关系,我们是兄弟关系,对,就是这样 下面来介绍一下我们的团队成团吧: 李奇原: 性格开朗.积极乐观.有责任心,擅长团队协 ...

  5. MacOS下搭建python环境

    1. 安装须知 Mac OS自身其实已经带有Python,版本为2.7.X,这个Python主要用于支持系统文件和XCode,所以我们在安装新的Python版本时候最好不要影响这部分. 这里就会出现一 ...

  6. Spring的事务到底该给Dao配置还是给Service配置

    Spring的事务到底该给Dao配置还是给Service配置 Spring事务为业务逻辑进行事务管理,保证业务逻辑上数据的原子性. 事务得根据项目性质来细分:事务可以设置到三个层面(dao层.serv ...

  7. 第三章 ServerSpcket用法详解

    构造ServerSocket ServerSocket的构造方法如下: ServerSocket() //Creates an unbound server socket. ServerSocket( ...

  8. iOS- Autolayout自动布局

    1.前言 •在iOS程序中,大部分视图控制器都包含了大量的代码用于设置UI布局,设置控件的水平或垂直位置,以确保组件在不同版本的iOS中都能得到合理的布局 •甚至有些程序员希望在不同的设备使用相同的视 ...

  9. 七周七语言之使用prolog解决爱因斯坦斑马难题

    如果你想获得更好的阅读体验,可以前往我在 github 上的博客进行阅读,http://lcomplete.github.io/blog/2013/06/28/sevenlang-prolog/. 目 ...

  10. Docker 技术 介绍

    https://github.com/docker/docker 实现用户空间隔离的技术:名称空间(NameSpace),CGroup(控制组) 什么是NameSpace::简单的理解就是,每一个虚拟 ...