</body>
</html>
DataTransfer返回FileList对象,我们可以把他当做file数组对象,file包含下面属性:name:文件名字;type:文件类型(MIME类型);size:文件大小。
运行效果:



6.上传文件
下面介绍一个通过拖拽ajax上传文件的实例。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
.table
{
display: table;
}
.row
{
display: table-row;
}
.cell
{
display: table-cell;
padding: 5px;
}
.label
{
text-align: right;
}
#target
{
border: medium double black;
margin: 4px;
height: 50px;
width: 200px;
text-align: center;
display: table;
}
#target > p
{
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<form id=”fruitform” method=”post” action=”/UploadHandler.ashx”>
<div class=”table”>
<div class=”row”>
<div class=”cell label”>
Bananas:</div>
<div class=”cell”>
<input name=”bananas” value=”2″ /></div>
</div>
<div class=”row”>
<div class=”cell label”>
Apples:</div>
<div class=”cell”>
<input name=”apples” value=”5″ /></div>
</div>
<div class=”row”>
<div class=”cell label”>
Cherries:</div>
<div class=”cell”>
<input name=”cherries” value=”20″ /></div>
</div>
<div class=”row”>
<div class=”cell label”>
File:</div>
<div class=”cell”>
<input type=”file” name=”file” /></div>
</div>
<div class=”row”>
<div class=”cell label”>
Total:</div>
<div id=”results” class=”cell”>
items</div>
</div>
</div>
<div id=”target”>
<p id=”msg”>
Drop Files Here</p>
</div>
<button id=”submit” type=”submit”>









