html5拖曳本地图片并读取,HTML5 拖拽图片到网页内

拖拽本地图片到页面指定元素内

window.onload = function() {

/*

拖拽事件监听========================================

*/

var oDropBox = document.getElementById('dropBox');

oDropBox.addEventListener('dragover', function(e) {

e.stopPropagation();

e.preventDefault();

}, false);

oDropBox.addEventListener('drop', handleDrop, false);

function handleDrop(e) {

e.stopPropagation();

e.preventDefault();

var fileList = e.dataTransfer.files,　　//获取拖拽文件

fileType = fileList[0].type,

oImg = document.createElement('img'),

reader = new FileReader();

if (fileType.indexOf('image') == -1) {

alert('请拖拽图片~');

return;

}

reader.onload = function(e) {

oImg.src = reader.result;

oDropBox.innerHTML = '';

oDropBox.appendChild(oImg);

}

reader.readAsDataURL(fileList[0])

}

/*

控制大小==========================================

*/

document.getElementById("btnLarger").onclick = function(){

var obj = document.getElementById("dropBox");

if(!obj || obj.width >= 800 || obj.height >= 800){

return;

}

increaseObjWidth(obj,10);

increaseObjHeight(obj,10);

}

document.getElementById("btnSmaller").onclick = function(){

var obj = document.getElementById("dropBox");

if(!obj || obj.width <= 0 || obj.height <= 0){

return;

}

increaseObjWidth(obj,-10);

increaseObjHeight(obj,-10);

}

//===============================================

}

function increaseObjWidth(obj,increaseBy){

obj.style.width = parseInt(obj.style.width) + increaseBy + "px";

}

function increaseObjHeight(obj,increaseBy){

obj.style.height = parseInt(obj.style.height) + increaseBy + "px";

}