web之前端获取上传图片并展示
1、html中经常存在图片上传的问题,但是后续的展示基本上是通过后台输出流的方式来呈现的。但是这样耗费的资源比较多。所以这里学习了一种前端直接展示图片的方式(供参考)。
2、html的编写方式比较简单
<img id="image" class="image"/>
<input id="imageFile" type="file" name="imageFile" accept="image/png,image/jpg,image/jpeg,image/bmp"/>
说明:实际代码中file的框可以直接做成按钮触发,file可以直接隐藏。image展示图片区域,可以自己设定长宽。
3、后台实现逻辑
//图片加载
$("#imageFile").change(function () {
var file = this.files[0];
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
//监听文件读取结束后事件
reader.onloadend = function (e) {
//e.target.result就是最后的路径地址
$("#image").attr("src",e.target.result);
};
}
});
web之前端获取上传图片并展示的更多相关文章
- 【Web】前端裁剪图片,并上传到服务器(Jcrop+canvas)
web网站中常常有的功能:上传头像.上传封面等:一般图片都有一定的比例限制,所以需要前端在上传图片时,进行裁剪,并把裁剪后的图片进行上传. 本例采用Jcrop插件实现裁剪效果,canvas裁剪图片,并 ...
- Web纯前端“旭日图”实现元素周期表
一.什么是旭日图 旭日图是在Excel 2016中新增的一种图表.有些类似饼图,饼图的优势是可以显示占比.但是饼图只能显示单级数据.旭日图用来表示多层级数据的占比.旭日图以一种分层方式显示,非常适合用 ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...
- 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- 关于web开发前端h5框架的选择
关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...
- bootstrap + angularjs + seajs构建Web Form前端2
bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...
- AMD和RequireJS初识----优化Web应用前端(按需动态加载JS)
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用Re ...
随机推荐
- hdu-2620 Ice Rain---数论(取模运算规律)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2620 题目大意: 给出n和k求: 解题思路: kmodi=k-i*[k/i] ,所以=nk-(1*[ ...
- [19/04/01-星期一] IO技术_字节流分类总结(含字节数组(Array)流、字节数据(Data)流、字节对象(Object)流)
一.字节流分类概括 -->1.ByteArrayInputStream /ByteArrayOutputStream(数组字节输入输出) InputStream/OutputStr ...
- [19/03/25-星期一] 容器_Collection(集合、容器)之Set(集合、安置,无顺序不可重复)
一.概念&方法 Set接口继承自Collection,Set接口中没有新增方法,方法和Collection保持完全一致.. Set容器特点:无序.不可重复.无序指Set中的元素没有索引,只能遍 ...
- JDBC(4)PreparedStatement
PreparedStatement: 是一个预编译对象 是Statement的子接口 允许数据库预编译SQL 执行SQL的时候,无需重新传入SQL语句,它们已经编译SQL语句 执行SQL语句 :exe ...
- TCP/IP模型 & 5层参考模型
OSl参考模型与TCP/IP参考模型相同点: 1.都分层 2.基于独立的协议栈的概念 3.可以实现异构网络互联
- halcon 数字转字符串实现循环读取图片
1.将字符转换为数字 tuple_number (StringImageIndex,IntImageIndex) 2.将数字转换为字符 tuple_string (IntImageIndex, '0' ...
- Many-to-many relationships in EF Core 2.0 – Part 3: Hiding as ICollection
In the previous post we ended up with entities that hide the join entity from the public surface. Ho ...
- 在ASP.NET Core的startup类中如何使用MemoryCache
问: 下面的代码,在ASP.NET Core的startup类中创建了一个MemoryCache并且存储了三个键值“entryA”,“entryB”,“entryC”,之后想在Controller中再 ...
- 启动tomcat的时候为啥你启动的是8,启动起来的确实其他的Tomcat
如果发现,是启动tomcat的时候为啥你启动的是8,启动起来的确实其他的Tomcat ,你可以去看看你的环境变量,是不是配了一个tomcat,
- Tornado异步与延迟任务
最近一直在研究Tornado异步操作,然而一番研究后发现要使一个函数异步化的最好方法就是采用相关异步库,但目前很多功能强大的库都不在此列.经过一番查找文档和搜索示范,终于发现了ThreadPoolEx ...