html5实现拖拽上传头像

1. 将客户端（本地电脑）中的图片拖到网页中

要点： html5 拖放， FileReader

 

html:

<div id="container" ondrop="drop(event)"></div>

 

js代码：

function drop(event) {

　　var file = event.dataTransfer.file[0];

　　var fileReader = new FileReader();

　　fileReader.readAsDataUrl(file);

　　fileReader.onload = function (){

　　　　var img = document.createElement('img');

　　　　img.style.width = '200px';

　　　　img.style.height = '200px';

　　　　img.src = fileReader.result;

　　　　// result数据格式为base64

　　　　document.body.appendChild(img);

　　}

}