HTML5中的文件、拖放

近几天学习了在HTML5中如何上传文件，怎样通过拖放来完成一个购物车的效果，下面是我个人的一些理解和代码。

一）上传文件

下面这段代码实现了通过上传文件，将文件中的文本内容显示在浏览器上，同时判断上传的文件是否是文档的类型。

HTML代码

<input type="file" id="file" />
		<input type="submit" id="btn"/>
		<div id="result">
			
		</div>

JS代码

<script>
			var oFlie = document.getElementById("file")
			var oBtn = document.getElementById("btn")
			var oRes = document.getElementById("result")
			var oImg = document.getElementsByTagName("img")
			oBtn.onclick = function(){
				var oType = oFlie.files[0].type
				//console.log(oType)  上传type 比如是文档 则是 text/plain
				var fs = oFlie.files[0]
				console.log(fs)
				
				var pattern = /^(text)\/\w+/ //验证规则
				if(!pattern.test(oType)){   //判断上传的文件是否是文档的类型
					oRes.innerHTML = "不可以上传"
				}
				var reader = new FileReader()
				
				reader.readAsText(fs)
				
				reader.onload = function(){
					oRes.innerHTML = this.result
				}
				
			

				
			}
		</script>

注意：

1.readAsText该方法会读取文件中的文本元素，并且读取结果都将存储在result属性中。

2.使用FileReader这个方法的时候，必须用new运算符，创建出对象，并且调用readAsDaraUrl方法读取文件，在实例的onload事件中，获取到成功读取到的文件内容。这里由于我只是读取文本内容，所以并没有用到readAsDaraUrl这个方法。

二）拖放

下面这段代码是类型购车的效果，通过拖动图片来累加购买物品的数量和所购买商品的总金额

这里css的代码就不发了

HTML代码

<div class="shopping" id="shopping">
			<ul>
				<li draggable="true"><img src="img/achievement_img.png">
				<h5>品牌</h5>
				<span>100</span>
				</li>
				<li draggable="true"><img src="img/achievement_img.png">
				<h5>品牌1</h5>
				<span>200</span>
				</li>
				<li draggable="true"><img src="img/achievement_img.png">
				<h5>品牌2</h5>
				<span>300</span>
				</li>
			</ul>
		</div>
		<div class="view" id="view">
			
		</div>

JS代码

<script>
			var oShop=document.getElementById("shopping")
			var oView=document.getElementById("view")
			var oLi=document.getElementsByTagName("li")
			var obj={}
			var sum=0
			var oDiv=null
			
			for (var i=0;i<oLi.length;i++) {
				oLi[i].ondragstart=function(e){
					var oH=this.getElementsByTagName("h5")
					var oSpan=this.getElementsByTagName("span")
					//console.log(oH)
					e.dataTransfer.setData("title",oH[0].innerHTML)
					e.dataTransfer.setData("money",oSpan[0].innerHTML)
				}
			}	
			
			oView.ondragover=function(e){
				e.preventDefault()
			}
			
			oView.ondrop=function(e){
				e.preventDefault()
				var oT=e.dataTransfer.getData("title")
				var oM=e.dataTransfer.getData("money")
				console.log(oM)
				if (!obj[oT]) { 
					var oA=document.createElement("a")
					oA.className="num"
					oA.innerHTML=1
					oView.appendChild(oA)
					
					var oA=document.createElement("a")
					oA.className="stitle"
					oA.innerHTML=oT
					oView.appendChild(oA)
					
					var oA=document.createElement("a")
					oA.className="smoney"
					oA.innerHTML=oM
					oView.appendChild(oA)
					obj[oT]=1
				}else{
					
					var allNum=document.getElementsByClassName("num")
					var allTitle=document.getElementsByClassName("stitle")
					
					for (var i=0;i<allNum.length;i++) {
						if (allTitle[i].innerHTML==oT) {
							allNum[i].innerHTML=parseInt(allNum[i].innerHTML)+1
						}
					}
				}
				if (!oDiv) {
					oDiv=document.createElement("div")
					
					oDiv.className="allmoney"
					
					oView.appendChild(oDiv)
				}
				
				sum+=parseFloat(oM)
				oDiv.innerHTML="总计"+sum+"元"
			}
		</script>