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. Vue组件绑定自定义事件

    Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...

  2. springmvc jar包下载 提供地址

    转载:https://blog.csdn.net/qq_31307253/article/details/80622936 spring:http://maven.springframework.or ...

  3. 使用ViewPager实现Tab

    一.效果演示及分析 我们直接看两幅图.如下:                   上两幅图实现的效果就是: (1)手指左右滑动时,中间的布局呈现不同的效果.而且下面的按钮也会做相应的改变. (2)我们 ...

  4. AtCoder Grand Contest

    一句话题解 QwQ主要是因为这篇文章写的有点长……有时候要找某一个题可能不是很好找,所以写了这个东西. 具体的题意.题解和代码可以再往下翻._(:з」∠)_ AGC 001 C:枚举中点/中边. D: ...

  5. #20145238荆玉茗《网络对抗》-逆向及Bof进阶实践

    20145238荆玉茗<网络对抗>-逆向及Bof进阶实践 实践目的:注入shellcode 准备一段shellcode代码 Shellcode实际是一段代码(也可以是填充数据),是用来发送 ...

  6. java 编写小工具 尝试 学习(一)

    1.单片机 调试经常 需要  用 串口 工具 发送 一些 特定的  协议或者 命令,每次要 翻译  写成 2进制 很麻烦 ,因此 打算自己用 java 写一个 工具 方便自己  调试,2017年3月2 ...

  7. idea中查看类层级class hierarchy

    idea中,我当前设置的是eclipse的快捷键(从eclipse转过来的) 一般情况下,查看类的子类Ctrl+T 如何以树的形式查看完整继承关系,快捷键:F4 效果如下: 尤其从根节点查看的时候,完 ...

  8. ios常用数据库、完美无缺

    直接copy过去就能用,我们不用再去造轮子,现在的xocod9.4更加人性化了,不用再添加依赖库,这点苹果你让我开始喜欢了,哈哈. 需要这兄弟拉进去的哈 下班标的1,2,3,4就是就截图的4个文件,没 ...

  9. ios reloadsection 位置偏移

    这个问题再iOS11之前不会发生,目前仅在iOS11机型上会出现. 解决这个问题很简单,只需要你在初始化tableview的时候,把estimate的高度都设为0即可. self.tableView. ...

  10. 竞赛题解 - NOIP2018 赛道修建

    \(\mathcal {NOIP2018}\) 赛道修建 - 竞赛题解 额--考试的时候大概猜到正解,但是时间不够了,不敢写,就写了骗分QwQ 现在把坑填好了~ 题目 (Copy from 洛谷) 题 ...