FileReader上传图片

实现拖拽图片，在上传至服务器前，显示图片并操控大小

利用HTML5

dragenter

dragover

dragleave

drop

在实现图片显示方面，用了FileReader这个类

var files=event.dataTransfer.files;//获取拖拽的图片集合

filereader.readAsDataURL(files[i]);

利用this.result

<img src='"+this.result+"'/>显示图片到页面

若想获得图片大小，需要重新实例一个Image对象：

var img = new Image();//创建image对象
img.src =innerimg.attr("src") ;//此处innerImg指的就是上传的图片jQuery对象
var w = img.width;
var h=img.height;

关于FileReader的相关信息，可以看http://www.helloweba.com/view-blog-224.html

转载于:https://www.cnblogs.com/openflyme/p/4727772.html

FileReader上传图片相关推荐

在vue中怎么写行内样式高_13.VUE学习之控制行内样式
vue 测试一测试二测试三 var app = new Vue({ el: "#vue", data:{ red:"red", size:28, div2: ...
模块加载及第三方包：Node.js模块化开发、系统模块、第三方模块、package.json文件、Node.js中模块的加载机制、开发环境与生产环境、cookie与session
1.Node.js模块化开发 1.1 JavaScript开发弊端 JavaScript 在使用时存在两大问题,文件依赖和命名冲突. 1.2 软件中的模块化开发一个功能就是一个模块,多个模块可以组成 ...
ssh修改服务器时间设置,服务器SSH连接时间设置
用SSH客户端连接linux服务器时,经常会出现与服务器会话连接中断现象,造成这个问题的原因便是SSH服务有自己独特的会话连接机制. 解决方案: 1.设置服务器向SSH客户端连接会话发送频率和时间 v ...
java 根据预览图片上传_JavaSctit 利用FileReader和滤镜上传图片预览功能
filereader 对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 file或 blob对象指定要读取的文件或数据. 1.filereader接口的方法 fi ...
h5上传图片html5,h5图片上传简易版（FileReader+FormData+ajax）
一.选择图片(input的file类型) 1. input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口:file类型的input会有files属性,保存着文件的相关信息. 2. ...
ionic上传身份证正反面照片、上传图片、FileReader使用（赞、实用）
原文出处:https://blog.csdn.net/qq_34645412/article/details/76162569 项目笔记: 有借鉴有自己的理解. 思路:上传图片首先需要获取到显示图片的 ...
ionic上传身份证正反面照片、上传图片、FileReader使用
项目笔记: 有借鉴有自己的理解. 思路:上传图片首先需要获取到显示图片的div的DOM节点,然后监听input的值,当input的值发生变化的时候,就将input的这个值插进div里面显示. 1.获取 ...
通过 html5 FileReader 实现上传图片预览功能
为什么80%的码农都做不了架构师?>>> Html 部分 <!DOCTYPE html> <html><head><meta char ...
JavaScript通过 new FileReader() 获取图片base64 无组件上传图片
我们知道,img的src属性或background的url属性,可以通过被赋值为图片网络地址或base64的方式显示图片. 在文件上传中,我们一般会先将本地文件上传到服务器,上传成功后,由后台返回图片 ...

FileReader上传图片

FileReader上传图片相关推荐

最新文章

热门文章