js图片上传功能的实现 FileReader()
想要实现的功能是,点击一个上传的按钮,然后选中上传图片,在页面上可以看到上传的图片
一开始是
点击这个+之后,上传的图片就出现在+上,将其覆盖
实现的思路如下:
html页面上的要有input type=file 来上传文件,由于上传按钮太丑了,所有将其隐藏起来,用add.png这个图片显示到页面上,accept是设置上传文件的类型,然后点击时调用getupload()事件
<input type="file" id="upload_file2" style="display: none;" accept="image/jpeg, image/gif,image/png,image/jpg" />
<div id="cj2"><img id="img2" onclick="getupload('img2','upload_file2')" src="data:images/add.png">
</div>
getupload()里面第一步执行上传,然后读取图片的内容,再返回即可。(看注释)
//图片上传、读取图片和在页面上显示
function getupload(ids,upids){//点击隐藏的上传按钮file 图片上传$("#"+upids).click();$("#"+upids).off("change");//防止多次触发change事件$("#"+upids).change(function(){//获取读取的File对象var file = this.files[0] ? this.files[0] : null;if (!file) { return false; }var file_reader = new FileReader();//读取图片的操作 //FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件file_reader.readAsDataURL(file);//读取图片的内容生成的base64编码的图//读取完成后,执行该回调函数,它会返回读取的结果result file_reader.onload = (function(){ var image_url = this.result; // 此时的图片已经存储到了result中 $("#"+ids).attr('src', image_url); // 创建图片标签 });});
}
js图片上传功能的实现 FileReader()相关推荐
- js图片上传功能前端
/*上传图片css*/.imageDiv {display: inline-block;width: 100px;height: 100px;-webkit-box-sizing: border-bo ...
- php layui ajax多图上传,Laravel+Layer实现图片上传功能(整理篇)
♩ 背景 昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能 但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在 最后将核心代码 ...
- 百度编辑器图片上传功能解疑
最头疼的上传图片问题 版本选择和自定义配置 项目中使用了百度编辑器ueditor,这里是官网链接,效果还算不错,使用中的一些经验,分享在这里. 我使用的环境是.NET MVC3 最头疼的上传图片问题 ...
- 微信JS图片上传与下载功能--微信JS系列文章(三)
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){va ...
- 「VUE架构」VUE2.0 图片上传功能(移动端)
本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的 ...
- Java实现图片上传功能(前后端:vue+springBoot)
Java实现图片上传功能(前后端:vue+springBoot) 前言: 前端: 组件引入 基础文件上传 自定义上传方法 后端: 需要引入的jar包: 基础文件上传 Controller层: serv ...
- ckeditor5图片上传功能的使用
如果想使用ckeditor5中的图片上传功能,就无法在项目中通过npm的方式来安装ckeditor,而是需要在https://ckeditor.com/ckeditor-5/online-builde ...
- html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能(图文详解上篇)...
这篇文章主要为大家详细介绍了HTML5 Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 因为最近一段时间,一直在弄微信项目,其中涉及到 ...
- 人人网的相册里图片上传功能是怎样实现的
大侠们,给我讲解下类似于人人网的相册里,图片上传功能是怎么实现的,它可以批量上传.我的想法是实现一个批量上传图片的功能,1.可以让用户同时选择多个图片上传.2.上传后会显示出来,并且可以单独对某张图进 ...
最新文章
- 一张图看懂图像识别算法发展历史
- java 动态创建实例_java – 有没有办法动态创建类(而不是实例)?
- Reverse Polish Notation
- mysql字段名explain_Mysql中explain用法和结果字段的含义介绍
- NumPy - np.random.multivariate_normal()
- observable_Java Observable clearChanged()方法与示例
- 网络编程基础--协程--greenlet切换---gevent自动识别 IO ---
- 数据库远程导入导出步骤
- Vuex的State核心概念
- 190415每日一句
- access百科 pc_Access是什么
- 善用佳软:如何使用Beyond Compare比对class文件
- 教程:如何将一首歌生成一个二维码?
- 对抗网络之PG-GAN,无条件下生成更真实的人脸图像
- echarts实现全国及各省市地图(内附地图json文件)
- 选择题库中的试题动态生成试卷(word格式)
- 回车、换行、空格的ASCII码值(不同OS平台下文件换行定义)
- 关于物流管理的软件测试项目经验,物流软件自动化测试用例管理和执行调度的设计与实现...
- ZStack——存储模型:主存储和备份存储
- 网卡最大传输单位MTU和巨型帧(Jumbo frame)设置