码迷,mamicode.com
首页 > Web开发 > 详细

FileReader上传图片

时间:2015-08-13 17:28:03      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:

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

利用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

FileReader上传图片

标签:

原文地址:http://www.cnblogs.com/openflyme/p/4727772.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!