查看文件属性
<body>
<input type="file" id="file" />
<input type="submit" id="btn"/>
<div id="result">
</div>
<script>
var oFlie = document.getElementById("file")
var oBtn = document.getElementById("btn")
var oRes = document.getElementById("result")
oBtn.onclick = function(){
var oName = oFlie.files[0].name
var oSize = oFlie.files[0].size
var oType = oFlie.files[0].type
oRes.innerHTML = "文件名称"+oName+"文件大小"+oSize+"文件类型"+oType
}
</script>
</body>
提交图片文件验证类型并预览
<body>
<input type="file" id="file" />
<input type="submit" id="btn"/>
<div id="result">
</div>
<script>
var oFlie = document.getElementById("file")
var oBtn = document.getElementById("btn")
var oRes = document.getElementById("result")
oBtn.onclick = function(){
var oType = oFlie.files[0].type
var fs = oFlie.files[0]
var pattern = /^(image)\/\w+/
if(!pattern.test(oType)){
oRes.innerHTML = "不可以上传"
}
var reader = new FileReader()
reader.readAsDataURL(fs)
reader.onload = function(){
oRes.innerHTML = "<img src='"+this.result+"' />"
}
}
</script>
提交TXT文档验证类型并预览
<body>
<input type="file" id="file" />
<input type="submit" id="btn"/>
<div id="result">
</div>
<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
var fs = oFlie.files[0]
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>
</body>
物品拖拽基础格式
<head>
<meta charset="UTF-8">
<title>事件拖拽</title>
<style>
.drag{
width: 100px;
height: 100px;
border: 1px solid black;
margin-bottom: 100px;
}
.result{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body style="margin: 100px;">
<div id="drag" class="drag" draggable="true">
</div>
<div id="result" class="result">
</div>
<script>
var oDrag = document.getElementById("drag")
var oRes = document.getElementById("result")
var i = 0
//开始拖拽
oDrag.ondragstart = function(){
console.log(1)
}
//拖拽中触发事件
oDrag.ondrag = function(){
}
//拖拽结束触发事件
oDrag.ondragend = function(){
console.log("结束了..")
}
//进入元素时触发
oRes.ondragenter = function(){
this.style.background = "blue"
}
oRes.ondragover = function(e){
document.title = i++
e.preventDefault()
}
oRes.ondragleave = function(){
this.style.background = "red"
}
oRes.ondrop = function(e){
e.preventDefault()
alert(1)
}
</script>
</body>
购物车的物品拖拽
<!DOCTYPE html>
<html>
<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>
<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>
<script>
var oList = document.getElementById("list")
var oLi = oList.getElementsByTagName("li")
var oView = document.getElementById("view")
var obj = {}
var sum = 0
var oDiv = null
for (var i=0;i<oLi.length;i++) {
oLi[i].ondragstart = function(e){
var oP = this.getElementsByTagName("p")
e.dataTransfer.setData("sTitle",oP[0].innerHTML)
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")
var oMoney = e.dataTransfer.getData("sMoney")
if(!obj[oTitle]){
var oSpan = document.createElement("span")
oSpan.className = "num"
oSpan.innerHTML = 1
oView.appendChild(oSpan)
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 {
var allNum = document.getElementsByClassName("num")
var allTitle = document.getElementsByClassName("title")
for (var i=0;i<allNum.length;i++) {
if(allTitle[i].innerHTML == oTitle){
allNum[i].innerHTML = parseInt(allNum[i].innerHTML)+1
}
}
}
if(!oDiv){
oDiv = document.createElement("div")
oDiv.className = "allMoney"
oView.appendChild(oDiv)
}
sum+=parseFloat(oMoney)
oDiv.innerHTML = "总计"+sum+"元"
}
</script>
</body>
</html>