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 ...
随机推荐
- Android(java)学习笔记209:Android线程形态之 HandlerThread
1. HandlerThread Android HandlerThread 完全解析 Handler与HandlerThread区别,HandlerThread应用(对比AsyncTask) 备注 ...
- CTSC2018 && APIO2018 && SDOI2018R2游记
Day -? 占个坑先.希望CTSC,APIO别打铁,R2别滚粗QAQ CTSC Day 0 早起坐车睡觉颓废报道颓废 反正游记就是咕懒得写了 Day 1 早上四点被xp的闹钟吵醒(???还两次) 幸 ...
- 关于js点击事件出现 xx is not defined at HTMLAnchorElement.onclick 的问题
测试: html: <button onclick="abc();">点我点我!</button> js: function abc(){ alert(“1 ...
- java 编写小工具 尝试 学习(二)
1. 新建一个窗口 ,代码 如下 ,截图 如下 package jFrameDemo; import javax.swing.JFrame; import javax.swing.WindowCon ...
- Oracle中插入千万条测试数据
测试需求,id.姓名.邮箱.手机号不可重复 1.创建序列 create sequence id_sequence; //创建序列id_sequence 2.创建表 create table USERI ...
- RMAN_PIPE
涉及的dbms_pipe包中的过程和函数:(1)PACK_MESSAGE Procedures用途:Builds message in local buffer(2)SEND_MESSAGE Func ...
- HTML表格属性及简单实例
这里主要总结记录下表格的一些属性和简单的样式,方便以后不时之需. 1.<table> 用来定义HTML的表格,具有本地属性 border 表示边框,border属性的值必须为1或空字符串( ...
- 小程序OSS图片上传
图片上传加水印问题,代码如下! chooseImage: function (e) { var that = this; wx.chooseImage({ sizeType: ['original', ...
- Spring的入门学习笔记 (AOP概念及操作+AspectJ)
AOP概念 1.aop:面向切面(方面)编程,扩展功能不通过源代码实现 2.采用横向抽取机制,取代了传统的纵向继承重复代码 AOP原理 假设现有 public class User{ //添加用户方法 ...
- pt-query-digest慢日志分析工具
简介 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOW PROCESSLIST或者通过tcpdum ...