您的位置：首页 > Web前端 > HTML5

HTML5——将图片拖拽上传

2016-11-17 17:17 405 查看
如下图所示：



代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{width:200px;height:200px;background:red;}
</style>
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById("div1");
div1.ondragenter=function(){
this.innerHTML="可以释放了";

}
div1.ondragover=function(ev){
ev.preventDefault();
}
div1.ondragleave=function(){
this.innerHTML="将文件拖拽到此区域";
}
div1.ondrop=function(ev){
ev.preventDefault();
var files=ev.dataTransfer.files;
var fd=new FileReader();
if(files[0].type.indexOf('image')!=-1){
fd.readAsDataURL(files[0]);
var ul1=document.getElementById("ul1");
fd.onload=function(){
var li1=document.createElement("li");
var img1=document.createElement("img");
img1.src=this.result;
li1.appendChild(img1);
ul1.appendChild(li1);
}
}else{alert("请选择图片上传");}
}

// alert(files.length);
}

</script>
</head>
<body>
<div id="div1">将文件拖拽到此区域</div>
<ul id="ul1">

</ul>
</body>
</html>


 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航