近几天学习了在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>