input file 图片上传展示重新上传
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 图片上传展示重新上传的更多相关文章
- input file 图片上传
使用第三方:jquery.ajaxfileupload.jsinput中的name根据后端来定 <form method="post" enctype="multi ...
- form input file 图片上传360IE兼容问题
<form action="" class="form-box" class="form_box" enctype="mul ...
- input file图片上传
<div class="div-title"> <h5>图片上传</h5> <div class="photo-box" ...
- input file图片上传预览
两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...
- input file图片上传预览效果
两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...
- 上传图片预览JS脚本 Input file图片预览的实现示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js获取 input file 图片缩略图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一段上传图片预览JS脚本,Input file图片预览的实现
在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...
- 根目录97 <input file>标签,把图片上传到服务器(跟增删改查一起实现)
首先来个简单的html页面: enctype="multipart/form-data" encoding="multipart/form-data" acti ...
随机推荐
- 2.openldap安装
1.安装步骤如下 获取软件包 安装软件包(rpm或者源码编译) 生产openldap配置文件及数据库文件 配置 添加目录树条目 加载slapd进程 验证 2.所需安装包说明 openldap,open ...
- 一个简单的rest_framework demo
models.py from django.db import models class UserInfo(models.Model): username = models.CharField(max ...
- java面向对象的有序数组和无序数组的比较
package aa; class Array{ //定义一个有序数组 private long[] a; //定义数组长度 private int nElems; //构造函数初始化 public ...
- 王者荣耀交流协会——第7次Scrum会议
照片由刘耀泽同学拍摄 ,王露芝同学(外援)没有参加本次会议. 要求2 : 时间跨度:2017年10月19日 15:05 - 15:20 共计15分钟 要求3 : 地点:计算机楼107教室 要求4 : ...
- Eclipse添加Jquery和javascript的智能提示
使用Eclipse写Jquery和Javascript代码的时候,是没有智能提示的.我们可以使用一个插件来解决这个问题. 安装完成后,Eclipse会自动重启.重启之后,我们在项目上右键, 根据自 ...
- jQuery之属性
1. 操作任意属性 attr() 操作非布尔值的 removeAttr() prop() 操作布尔值的2. 操作class属性 addClass() 添加class属性 removeClass() 移 ...
- PictureBox使用异常
PictureBox的使用 代码: 显示部分 当我切换不同位置之间的照片时,出现这种问题: 但是当我代码改成下面的代码时,则错误消除 但我并不清楚原因
- TP中CURD操作
CURD操作 CURD操作也就是模型操作数据表的基本操作.C(Create).U(Update).R(Read).D(Delete)操作就是增删改查操作. 6.1.增加操作 回想一下在mysql中增加 ...
- Windows搭建Log4Net+FileBeat+ELK日志分析系统过程
参考博客:http://udn.yyuap.com/thread-54591-1-1.html ; https://www.cnblogs.com/yanbinliu/p/6208626.html ; ...
- 当使用listIterator进行迭代时候 list的迭代器可以在创建迭代器对象后 添加数据 但打印的时候不显示添加后的数据。 collection 的iterator迭代器不能添加数据 。list的对象与collection的实例对象都不能在创建迭代器后添加数据 list的迭代器保存的是循环前的数据长度