目录
一、首先，要看有关的文档
HTML5中的文件与拖放
1.掌握files对象
2. FileReader对象的使用方法
3.FileReader对象事件
4.掌握HTML5新增拖拽的api
5.掌握dataTransfer的使用方法
在HTML5中，从Web网页上访问本地文件系统非常简单，那就是使用它新增的API，files对象。
一) files对象的使用方法
| 属性 |
描述 |
| name |
文件名称 |
| size |
文件大小 |
| type |
文件类型 |
注意:用户每个选择的文件都是一个files对象，而fileList对象则为这些files对象的列表，代表用户选择的所有文件。
练习1:打印出上传文件的详细信息
练习2:进行上传文件后缀判断
二) FileReader接口读取文件
FileReader接口主要用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步的api，使用该api可以在浏览器主线程中异步访问文件系统，读取文件中的数据。
| 方法 |
参数 |
描述 |
| readAsDataUrl |
file |
将文件读取为DataURL |
| readAsText |
file |
将文件读取为文本 |
2.1：readAsDataUrl:该方法将文件读取为一段以data开头的字符串，这段字符串实际上是dataURL.，并且读取结果都将存储在result属性中。
2.2:readAsText该方法会读取文件中的文本元素，并且读取结果都将存储在result属性中。
注意:使用FileReader的时候，必须使用new运算符，创建出对象，并且调用readAsDaraUrl方法读取文件，在实例的onload事件中，获取到成功读取到的文件内容。
练习3：使用readAsDataUrl预览图片
思考题;如何实现多个图片预览上传？
练习4：使用readAsText读取文本文件
- FileReader事件
FileReader接口中包含了一套完整的事件模型，用于捕获读取文件的状态。
| 事件 |
描述 |
| onabort |
中断时触发 |
| onerror |
出错时触发 |
| onload |
文件读取成功完成时触发 |
| onloadstart |
读取完成触发，无论成功或失败 |
| onloadend |
读取时触发 |
| onprogress |
读取中（接受事件对象） |
练习5：ajax异步上传文件(带进度条)
注意：文件上传是属于数据流的格式，那么我们就要注意，就要使用HTML5中的FormData对象
FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。
jquery中ajax方法，用法如下:
| var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "This is some extra data"); $.ajax({ url: "stash.php", type: "POST", data: fd, processData: false, // 不处理数据 contentType: false // 不设置内容类型 )}
|
四) 常见的拖放api
在HTL5中，支持直接拖放操作的api。虽然HTML5之前已经可以使用mousedown,mousemove和mouseup来进行操作，但只支持在浏览器内部的拖放；而在HTML5中，已经支持在浏览器与其它应用程序之间的数据互相拖动。
实现拖拽的步骤
- 把需要拖放的对象元素的draggable属性设为true(draggable=true)。这样才能将该元素进行拖放。
- 编写与拖放有关的事件处理代码。
拖拽api
拖拽元素API：
- ondragstart:开始拖拽时触发
- Ondrag:拖拽中触发事件
- Ondragend:拖拽结束触发事件
目标元素API:
- ondragenter:进入目标元素时触发
- Ondragover:在目标元素时触发
- Ondragleave:离开目标元素时触发
- Ondrop:在目标元素上释放触发
注意:使用ondrop事件，必须要在ondragover中阻止默认事件。（e.preventDefault()）
- dataTransfer对象用法
拖拽过程中，一定伴随着一个datatransfer对象，这个是新增的事件对象。
Datatransfer有两个重要的方法:
- setData(key,value):设置数据
- getData(key):获取数据
练习7:利用datatransfer中的setData()和getData()设置和获取文本
练习8:利用 datatransfer实现文本(txt)预览
练习9:利用datatranster实现单张图片预览
练习10:利用datatranster实现多张图片预览
练习11:利用拖拽api和datatranster实现购物车结算
五) 总结
主要介绍了文件api和拖放api。在文件api中主要介绍了fileList对象与file对象，以及FileReader接口。通过这些文件的对象和接口，可以实现文件上传与文件预览等操作。介绍了dataTransfer对象的属性与方法的介绍，通过使用文件的api与拖放API，对于web页面上访问本地文件系统的相关操作，将会变得很简单。
二、然后创建THML，布局，写好css的样式
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul li{
list-style: none;
}
.list{
width: 880px;
height: 300px;
border: 1px solid #ddd;
margin: 0 auto;
margin-bottom: 10px;
}
.list ul li{
width: 200px;
height: 240px;
float: left;
margin: 10px;
}
.list ul li img{
width: 200px;
height: 240px;
}
.view{
width: 880px;
margin: 0 auto;
border: 1px solid #ddd;
min-height: 300px;
position: relative;
}
.view span{
float: left;
width: 293px;
height: 40px;
border-bottom: 1px solid #ddd;
text-align: center;
line-height: 40px;
}
.view .allMoney{
position: absolute;
width: 100%;
height: 20px;
left: 0;
bottom: 0;
text-align: right;
}
</style>
</head>
<script type="text/javascript" src="js/2.js" ></script>
<body>
<div class="list" id="list">
<ul>
<li draggable="true">
<img src="img/1.jpg" />
<p>javascript精粹</p>
<p>140</p>
</li>
<li draggable="true">
<img src="img/2.jpg" />
<p>javascript权威指南</p>
<p>240</p>
</li>
<li draggable="true">
<img src="img/3.jpg" />
<p>javascriptDom艺术</p>
<p>340</p>
</li>
<li draggable="true">
<img src="img/4.jpg" />
<p>javascript红皮书</p>
<p>40</p>
</li>
</ul>
</div>
<div class="view" id="view">
<!--<span class="num">1</span>
<span class="title">javascript精粹</span>
<span class="money">40</span>
<div class="allMoney">
40
</div>-->
</div>三、最后编写js脚本，解释都在文件中。
<script>
var oList = document.getElementById("list")
var oLi = oList.getElementsByTagName("li")
var oView = document.getElementById("view")
var obj = {}//布尔值为真
var sum = 0
var oDiv = null//布尔值为假
//给每个li被拖拽的事件
for (var i=0;i<oLi.length;i++) {
oLi[i].ondragstart = function(e){
var oP = this.getElementsByTagName("p")//获取到li下面的p节点
//利用dataTransfer这个事件对象来设置和获取数据
e.dataTransfer.setData("sTitle",oP[0].innerHTML)//通过setData的方法来设置数据
e.dataTransfer.setData("sMoney",oP[1].innerHTML)
}
}
//一定要阻止默认事件
oView.ondragover = function(e){
e.preventDefault()//阻止默认行为
}
oView.ondrop = function(e){
e.preventDefault()//阻止默认行为
var oTitle = e.dataTransfer.getData("sTitle")//通过getData的方法接收数据缓存到oTitle中
var oMoney = e.dataTransfer.getData("sMoney")
//创建一个空的对象来做判断条件
if(!obj[oTitle]){
//通过盘对条件来相对应的添加节点和数据
var oSpan = document.createElement("span")
oSpan.className = "num"//设置节点的属性
oSpan.innerHTML = 1//给节点的文本赋值
oView.appendChild(oSpan)//将节点添加到oView节点的下面
var oSpan = document.createElement("span")
oSpan.className = "title"
oSpan.innerHTML = oTitle
oView.appendChild(oSpan)
var oSpan = document.createElement("span")
oSpan.className = "money"
oSpan.innerHTML = oMoney
oView.appendChild(oSpan)
obj[oTitle] = 1
}else {
// alert(2)
var allNum = document.getElementsByClassName("num")//获取到每个属性为num的节点
var allTitle = document.getElementsByClassName("title")//获取到每个属性为title的节点
//for循环每个节点
for (var i=0;i<allNum.length;i++) {
//如果每个allTitle节点的innerTHML跟原来的oTitle的innerTHML相同，allNum节点的IinnerHTML就+1
if(allTitle[i].innerHTML == oTitle){
allNum[i].innerHTML = parseInt(allNum[i].innerHTML)+1
}
}
}
//同理上面的判断条件，如果这个oDiv对象不存在就在oView节点下面添加oDiv节点，否则就将oMoney的number追加到oDiv的innerHTML
if(!oDiv){
oDiv = document.createElement("div")
oDiv.className = "allMoney"
oView.appendChild(oDiv)//添加节点
}
// console.log(oMoney)
sum+=parseFloat(oMoney)//追加数据
oDiv.innerHTML = "总计"+sum+"元"//赋值
}
</script>