FileReader上传图片

发表于2015-09-12 10:52:08| --次阅读| 来源webkfa| 作者html5,css3

摘要：实现拖拽图片，在上传至服务器前，显示图片并操控大小利用HTML5dragenterdragoverdragleavedrop在实现图片显示方面，用了FileReader这个类var files=event.dataTransfer.files;//获取拖拽的图片集合filereader.readAs...

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

利用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上传图片

发表于2015-09-12 10:52:08| --次阅读| 来源webkfa| 作者html5,css3

相关文章

最新发布

阅读排行

热门文章

猜你喜欢