<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用datatransfer实现文本预览</title>
<style>
.result{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body style="margin: 100px;">
<div class="result">
</div>
<div id="view">
</div>
<script>
var oRes = document.getElementsByTagName("div")[0]
var oView = document.getElementById("view")
oRes.ondragenter = function(){
this.innerHTML = "可以放手"
}
oRes.ondragover = function(e){
e.preventDefault()
}
oRes.ondrop = function(e){
e.preventDefault()
// console.log(e.dataTransfer)
var fs = e.dataTransfer.files[0]
var reader = new FileReader()
reader.readAsText(fs)
reader.onload = function(){
// console.log(this.result)
oView.innerHTML = this.result
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>datatransfer中的setData()和getData()</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 class="drag" draggable="true">
</div>
<div class="result">
</div>
<script>
var oDrag = document.getElementsByTagName("div")[0]
var oRes = document.getElementsByTagName("div")[1]
oDrag.ondragstart = function(e){
e.dataTransfer.setData("title","今日头条")
}
oRes.ondragenter = function(){
this.innerHTML = "可以释放"
}
oRes.ondragover = function(e){
e.preventDefault()
}
oRes.ondrop = function(e){
e.preventDefault()
var test = e.dataTransfer.getData("title")
this.innerHTML = test
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<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(){
// document.title = i++
}
//拖拽结束触发事件
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>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
}
.progress{
width: 200px;
height: 20px;
background: #ddd;
position: relative;
}
.info{
width:0px;
height: 20px;
background: darkgreen;
position: absolute;
left: 0;
top: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
</head>
<body style="margin: 200px;">
<input type="file" id="file" name="file" />
<div class="progress">
<div class="info" id="info">
</div>
</div>
<div id="result">
</div>
<input type="submit" id="btn" />
<script>
var oFlie = document.getElementById("file")
var oBtn = document.getElementById("btn")
var oRes = document.getElementById("result")
var oImg = document.getElementsByTagName("img")
var oInfo = document.getElementById("info")
oBtn.onclick = function(){
var fs = oFlie.files[0]
var reader = new FileReader(fs)
reader.onprogress = function(e){
// console.log(e)
oInfo.style.width= e.loaded/e.total*200+"px"
oRes.innerHTML = Math.round((e.loaded/e.total*200)*0.5)+"%"
}
reader.onload = function(){
// alert('完成了')
var data = new FormData()
data.append("file",fs)
// console.log(data)
$.ajax({
type:"post",
url:"api/test.php",
async:true,
data:{
data:data
},
processData:false,
contentType:false,
success:function(res){
console.log(res)
}
});
}
reader.readAsDataURL(fs)
}
</script>
</body>
</html>
日常代码骗