html

  1. <div>
  2. <label class="imgMark">说明:</label>
  3. <div class="erWeiMa">
  4. <img src="" class="imgShow" >
  5. <img src="upload.png">
  6. <input type="file" class="file" >
  7. </div>
  8. </div>

js

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

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. [redis] linux下哨兵篇(3)

    一.前言1.为何部署sentinel哨兵前文redis主从架构中,当主服务故障时,需要手动将从服务切换为主服务,sentinel服务就是将这个过程自动化.主要功能有:1)不时监控主从服务正常运行2)可 ...

  2. “Hello World!”团队第十三次会议

    今天是我们团队“Hello World!”团队召开的第十三次会议.博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.todo list 六.会议照片 七.燃尽图 一.会议时间 2 ...

  3. 20172330 2017-2018-1 《Java程序设计》第十周学习总结

    20172330 2017-2018-1 <程序设计与数据结构>第十周学习总结 教材学习内容总结 本周的学习内容为集合 集合 对象具有定义良好的接口,从而成为一种实现集合的完善体制. 动态 ...

  4. MyEclipse快捷方式

    选择你要注释的那一行或多行代码,按Ctrl+/即可,取消注释也是选中之后按Ctrl+/即可. 如果你想使用的快捷键的注释是的话,那么你的快捷键是ctrl+shift+/我以前都是手动注释的,直接打// ...

  5. plsql 永久注册码

    注册码:Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769 password:xs374ca 可用

  6. mvc4 找到多个与名为“xx”的控制器匹配的类型

    asp.net mvc4 添加分区出现错误 找到多个与名为“home”的控制器匹配的类型 会出现如下错误”找到多个与名为“home”的控制器匹配的类型“ 在RouteConfig文件中添加命名空间可解 ...

  7. fsockopen 异步非阻塞式请求数据

    index.php <?php ini_set ( "max_execution_time", "0" ); // 要传递的数据 $form_data = ...

  8. 图文详解 IntelliJ IDEA 15 创建 Maven 构建的 Java Web 项目(使用 Jetty 容器)

    图文详解 IntelliJ IDEA 15 创建 maven 的 Web 项目 搭建 maven 项目结构 1.使用 IntelliJ IDEA 15 新建一个项目.  2.设置 GAV 坐标  3. ...

  9. ci事务

    CI框架百问百答:CodeIgniter的事务用法?--第9问 时间 2013-06-06 10:57:45  CSDN博客 原文  http://blog.csdn.net/haor2756/art ...

  10. HashMap的扩容机制以及默认大小为何是2次幂

    HashMap的Put方法 回顾HashMap的put(Key k, Value v)过程: (1)对 Key求Hash值,对n-1取模计算出Hash表数组下标 (2)如果没有碰撞,直接放入桶中,即H ...