一、简单的图片上传并预览功能input[file]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>简单的上传图片并预览</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<style>
*{
padding: 0;
margin: 0 auto;
}
.yg_content{
margin-top: 50px;
text-align: center;
}
#upimg{
display: none;
}
.yg_content p{
padding: 10px;
display: inline-block;
color: #fff;
background: #08c;
border: 1px #ccc solid;
border-radius: 10px;
}
.yg_content p:active{
opacity: .5;
}
.showimg{
margin: 20px auto;
border: 1px #ccc solid;
border-radius: 10px;
width: 200px;
height: 200px;
}
.showimg img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="yg_content">
<input type="file" id="upimg" accept="image/*" onchange="upLoad()">
<label for="upimg">
<p>点击上传图片</p>
</label>
<div class="showimg">
<img id="img" src="data:images/tx_1.jpg" alt="">
</div>
</div>
</body>
<script>
function upLoad(){
var fileInput = document.getElementById("upimg");
var file = fileInput.files[0];
//创建读取文件的对象
var reader = new FileReader();
//创建文件读取相关的变量
var imgFile;
//为文件读取成功设置事件
reader.onload=function(e) {
// alert('文件读取完成');
imgFile = e.target.result;
console.log(imgFile);
$("#img").attr('src',imgFile);
}; //正式读取文件
reader.readAsDataURL(file);
}
</script>
</html>

一、简单的图片上传并预览功能input[file]的更多相关文章

  1. input file实现多选,限制文件上传类型,图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  2. 原生JS实现图片上传并预览功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  4. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  6. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  8. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  9. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

随机推荐

  1. mysql错误: waiting for table metadata lock

    今天突然发现truncate一个表都慢到不行,于是 SHOW PROCESSLIST 发现错误:waiting for table metadata lock解决方法:查看information_sc ...

  2. Vue项目安装CubeUI

    CubeUi GitHub地址:https://github.com/didi/cube-ui install vue add cube-ui 项目中 会多出cube ui 的配置文件来

  3. SQLite和MySQL数据库的差别与应用

    简单来说,SQLITE功能简约.小型化,追求最大磁盘效率:MYSQL功能全面,综合化.追求最大并发效率.假设仅仅是单机上用的,数据量不是非常大.须要方便移植或者须要频繁读/写磁盘文件的话.就用SQLi ...

  4. 日志管理工具logrotate

    工作所需,需要管理脚本的打印日志,百度一圈,发现了logrotate这款工具,经测试确实挺好的! 话不多说,直接上重点,以便于以后需要时查看 命令: whereis logrotate 可以看到log ...

  5. springboot整合hibernate案例

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springBo ...

  6. [CF-GYM]Abu Tahun Mod problem题解

    前言 这道题比较简单,但我还是想了好一会 题意简述 Abu Tahun很喜欢回文. 一个数组若是回文的,那么它从前往后读和从后往前读都是一样的,比如数组\(\left\{1\right\},\left ...

  7. BUUCTF | [De1CTF 2019]SSRF Me

    解法一字符串拼接: 1.得到签名sign http://8fa4531c-1164-49b7-a700-70e77e6aacb7.node3.buuoj.cn/geneSign?param=flag. ...

  8. Jira中的Tempo查看component以及issue的工作量汇总

    在右侧group by的地方,同时选中component和issue

  9. MySQL-创建测试数据

    简单的方法(每次增加一倍): insert into tb_user(f_id, f_username) select rand(), f_username from tb_user

  10. MySQL 1130错误,无法远程连接

    错误:ERROR 1130: Host '192.168.1.3' is not allowed to connect to thisMySQL serve 错误1130:主机192.168.1.3” ...