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之前端获取上传图片并展示的更多相关文章

  1. 【Web】前端裁剪图片,并上传到服务器(Jcrop+canvas)

    web网站中常常有的功能:上传头像.上传封面等:一般图片都有一定的比例限制,所以需要前端在上传图片时,进行裁剪,并把裁剪后的图片进行上传. 本例采用Jcrop插件实现裁剪效果,canvas裁剪图片,并 ...

  2. Web纯前端“旭日图”实现元素周期表

    一.什么是旭日图 旭日图是在Excel 2016中新增的一种图表.有些类似饼图,饼图的优势是可以显示占比.但是饼图只能显示单级数据.旭日图用来表示多层级数据的占比.旭日图以一种分层方式显示,非常适合用 ...

  3. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  4. 05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

  5. 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  6. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  7. 关于web开发前端h5框架的选择

    关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...

  8. bootstrap + angularjs + seajs构建Web Form前端2

    bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...

  9. AMD和RequireJS初识----优化Web应用前端(按需动态加载JS)

    RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用Re ...

随机推荐

  1. Android(java)学习笔记209:Android线程形态之 HandlerThread

    1.  HandlerThread Android HandlerThread 完全解析 Handler与HandlerThread区别,HandlerThread应用(对比AsyncTask) 备注 ...

  2. CTSC2018 && APIO2018 && SDOI2018R2游记

    Day -? 占个坑先.希望CTSC,APIO别打铁,R2别滚粗QAQ CTSC Day 0 早起坐车睡觉颓废报道颓废 反正游记就是咕懒得写了 Day 1 早上四点被xp的闹钟吵醒(???还两次) 幸 ...

  3. 关于js点击事件出现 xx is not defined at HTMLAnchorElement.onclick 的问题

    测试: html: <button onclick="abc();">点我点我!</button> js: function abc(){ alert(“1 ...

  4. java 编写小工具 尝试 学习(二)

    1. 新建一个窗口  ,代码 如下 ,截图 如下 package jFrameDemo; import javax.swing.JFrame; import javax.swing.WindowCon ...

  5. Oracle中插入千万条测试数据

    测试需求,id.姓名.邮箱.手机号不可重复 1.创建序列 create sequence id_sequence; //创建序列id_sequence 2.创建表 create table USERI ...

  6. RMAN_PIPE

    涉及的dbms_pipe包中的过程和函数:(1)PACK_MESSAGE Procedures用途:Builds message in local buffer(2)SEND_MESSAGE Func ...

  7. HTML表格属性及简单实例

    这里主要总结记录下表格的一些属性和简单的样式,方便以后不时之需. 1.<table> 用来定义HTML的表格,具有本地属性 border 表示边框,border属性的值必须为1或空字符串( ...

  8. 小程序OSS图片上传

    图片上传加水印问题,代码如下! chooseImage: function (e) { var that = this; wx.chooseImage({ sizeType: ['original', ...

  9. Spring的入门学习笔记 (AOP概念及操作+AspectJ)

    AOP概念 1.aop:面向切面(方面)编程,扩展功能不通过源代码实现 2.采用横向抽取机制,取代了传统的纵向继承重复代码 AOP原理 假设现有 public class User{ //添加用户方法 ...

  10. pt-query-digest慢日志分析工具

    简介 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOW PROCESSLIST或者通过tcpdum ...