一、在网页拖放内容：
1.drag.htm,拖放页面元素的内容:
<html>
<head>
<title>第五周</title>
<style type="text/css">
#dragSource{
border-width: 1px;
border-style: solid;
border-color: #00ff00;
width: 140px;
height: 72px;
}
#dropTarget{
border-width: 1px;
border-style: solid;
border-color: #0000ff;
background-color: #ccccff;
width: 380px;
height: 300px;
}
</style>
<script type="text/javascript">
function DragStart(){
var source=document.getElementById('dragSource');
source.addEventListener('dragstart',function(e){
e.dataTransfer.setData('text/plain',e.target.innerHTML);
e.dataTransfer.effectAllowed="copy";
},false);
}
window.addEventListener('load',DragStart,false);
function DragOver(){
var target=document.getElementById('dropTarget');
target.addEventListener('dragover',function(e){
this.className="dragover";
e.preventDefault();
},false);
}
window.addEventListener('load',DragOver,false);
function Drop(){
var target=document.getElementById('dropTarget');
target.addEventListener('drop',function(e){
var data=e.dataTransfer.getData('text/plain');
this.innerHTML +=data;
e.dataTransfer.dropEffect="copy";
this.className="";
},false);
}
window.addEventListener('load',Drop,false);
</script>
</head>
<body>
<div id="dragSource" draggable="true">拖这里<img src="./IMG_20201102_205532.png" width="75" height="72"></div>
<div id="dropTarget"></div>
</body>
</html>结果：
2.遍历File对象：
<html>
<head>
<title>第五周</title>
<style type="text/css">
</style>
<script type="text/javascript">
function ShowFiles(){
var fileList=document.getElementById("files").files;
var msg=document.getElementById("msg");
var file;
for(var i=0;i<fileList.length;i++){
file=fileList[i];
msg.innerHTML+=file.name+";<br/>";
}
}
</script>
</head>
<body>
<form action="" method="post">
<input type="file" id="files" multiple />
<input type="button" value="显示文件" onclick="ShowFiles()"/>
<p id="msg"></p>
</form>
</body>
</html>结果：
3.获取文件的大小和类型：
<html>
<head>
<title>第五周</title>
<style type="text/css">
</style>
<script type="text/javascript">
function ShowType(){
var files=document.getElementById("files").files;
var msg=document.getElementById("msg");
var file;
var con="";
for(var i=0;i<files.length;i++){
file=files[i];
con+="文件名称："+file.name+";<br/>";
con+="字节长度："+file.size+";<br/>";
con+="文件类型："+file.type+";<br/>";
}
msg.innerHTML=con;
}
</script>
</head>
<body>
<form action="" method="post">
<input type="file" id="files" multiple accept="image"/>
<input type="button" value="显示文件数据" onclick="ShowType()"/>
<div id="msg"></p>
</form>
</body>
</html>结果：
4.把图片拖入浏览器：
<html>
<head>
<title>第五周</title>
<style type="text/css">
#dropTarget{
width: 300px;
height: 300px;
margin: 10px 0 0 0;
border: 1px solid #015EAC;
}
#dropTarget img{
width: 100px;
height: 60px;
margin: 5px;
}
</style>
<script type="text/javascript">
var target;
function dropHandle(e){
var fileList=e.dataTransfer.files,
fileType;
for(var i=0;i<fileList.length;i++){
fileType=fileList[i].type;
if (fileType.indexOf('image')==-1){
alert('请拖拽图片');
return;
}
loadImg(fileList[i]);
}
}
function loadImg(file){
var reader=new FileReader();
reader.onload=function(e){
var oImg=document.createElement('img');
oImg.src=this.result;
target.appendChild(oImg);
}
reader.readAsDataURL(file);
}
window.onload=function(){
target=document.getElementById('dropTarget');
target.addEventListener('dragover',function(e){
e.preventDefault();
},false);
}
target.addEventListener('drop',dropHandle,false);
</script>
</head>
<body>
<div>把图片拖放到下面的方框。</div>
<div id="dropTarget"></div>
</body>
</html>
（我们可以在浏览器中按F12来打开控制台查看某个网页的元素
仅仅是如此简洁的界面就有大量的元素 ，不过大部分都是重复的，因为元素都差不多，是一些图片链接什么的）