input[type="file"]的图片预览
在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能;之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但是图片却已经改变,如果在需要改变就导致了多余图片的保存服务器。
如下可实现代码预览:
1、直接添加图片预览
<input type='file' id='file' /> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$("#file").change(function(e) {
var file = e.target.files[] || e.dataTransfer.files[](weizhi);
if(file) {
var reader = new FileReader();
reader.onload = function() {
$("body").append("<img src='" + this.result + "'/>");
}
reader.readAsDataURL(file);
}
});
})
</script>
2、点击预览
<input type="file" id="file" multiple />
<input type="button" value="读取图像" onclick="readAsDataURL()" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function readAsDataURL() {
var file = $("#file").get(0).files;
// var file = document.getElementById("file").files;
for(i = ; i < file.length; i++) {
reader.readAsDataURL(file[i]);
reader.onload = function(e) {
//多图预览
$("body").append('<img src="' + this.result + '" alt="" />');
}
}
}
</script>
input[type="file"]的图片预览的更多相关文章
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
- input type=file 选择图片并且实现预览效果的实例
为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...
- jquery解决file上传图片+图片预览
js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...
- input type=file实现图片上传,预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- html input type=file 选择图片,图片预览 纯html js实现图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- input type=file 选择图片并且实现预览效果
通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否 ...
- input type="file"多图片上传 原生html传递的数组集合
单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...
- input type="file"多图片上传
单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...
- input type=file实现图片上传
<label for="file"> <img src="images/morende.jpg" alt=""> & ...
随机推荐
- js从数组中取出n个不重复的数据
/** * 首先,针对这个数组做一个去重处理,避免你在后面取数据的时候,因为取到相同的元素而又要多去取一次随机数 * 将获取到的不重复的数组,再到这里样本里面去取随机数 * 每取到一次,就将这个元素从 ...
- Python 之 PyCharm使用
PyCharm 的官方网站地址是:https://www.jetbrains.com/pycharm/download/ 教育版:https://www.jetbrains.com/pycharm- ...
- c#可自定义码表的base64加密解密算法类
000 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...
- C#中方向键与回车键切换控件焦点
环境:界面上有TextBox,ComboBox等控件. 不建议把左右方向键都用来切换焦点,否则你在TextBox里面改变光标所在字符位置就不方便了. 方法一:笨方法,需为每个控件单独注册事件处理 以T ...
- io框架
IO流的三种分类方式 1.按流的方向分为:输入流和输出流 2.按流的数据单位不同分为:字节流和字符流 3.按流的功能不同分为:节点流和处理流 (节点流表示的是直接操作节点(例如文件,键盘)的流,例如F ...
- 更新GitHub的仓库
在GitHub上仓库已经存在且提交过,本地仓库部分更新后推送至GitHub仓库 添加,提交至本地仓库 将改动文件添加并提交到仓库 Roc@DESKTOP-AF552U2 MINGW64 /e/note ...
- Uboot优美代码赏析1:目录结构和malkefile分析
Uboot优美代码赏析1:目录结构和malkefile分析 关于Uboot自己选的版本是目前最新的2011.06,官方网址为:http://www.denx.de/wiki/U-Boot/WebHom ...
- 通过CSS样式隐藏百度版权标志
在JSP中添加: //隐藏所有.anchorBL{ display:none; } //隐藏下方的保留百度地图图片 .BMap_cpyCtrl{ display:none; } 注:维护他人版权, ...
- cogs 2060. 除法表达式
2060. 除法表达式 ★★ 输入文件:baoquansl.in 输出文件:baoquansl.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] 经过无尽的蘑菇和 ...
- Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型
转自原文 Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型 播放mp4格式的时候提示 Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型 原因是在IIS中 ...