当前位置：首页 > news >正文

HTML5 拖拽图片到网页内

news 来源：原创 2024/5/11 2:07:15

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>拖拽本地图片到页面指定元素内</title>

   <script type="text/javascript">
            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";
}
        </script>

</head>
<body>


<div>
<input type="button" value="+" id ="btnLarger"></input>
<input type="button" value="-" id="btnSmaller"></input>
</div>  
   <div id="dropBox" style="float:left;width:300px;height:200px;margin:10px 0 0 0;border:1px solid #015EAC;color:#666;overflow:hidden;">


   </div>


</body>
</html>