H5图片异步拖拽上传
Posted vsmart
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5图片异步拖拽上传相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{width: 200px; height: 200px; background: red; margin: 50px;}
</style>
<script src="http://hs.3g.cnfol.com/f=uh/Js/WeiXin/jquery.1.91.js"></script>
</head>
<body>
<div id="div1">将文件拖拽到此区域</div>
<input type="button" id="btn" value="subclick">
<img src="" id="upimg" >
</body>
</html>
<script>
window.onload = function(){
var odiv = document.getElementById(‘div1‘);
odiv.ondragenter = function(){
this.innerHTML=‘可以释放啦！‘;
}
odiv.ondragover = function(ev){
ev.preventDefault();
}
odiv.ondragleave = function(){
this.innerHTML = ‘将文件拖拽到此区域‘;
}
odiv.ondrop = function(ev){
ev.preventDefault();
var fs = ev.dataTransfer.files;
var formData= new FormData();
//相当于 <input type=file name=‘myfile‘ />
formData.append("file",fs[0]);
var xhr = new XMLHttpRequest();
xhr.open("post","upload.php");
xhr.onload=function(res){
alert("上传完成！");
$("#upimg").attr("src",res.currentTarget.responseText);
//console.log(res.currentTarget.responseText);
}
xhr.send(formData);
}
}
</script>
以上是关于H5图片异步拖拽上传的主要内容，如果未能解决你的问题，请参考以下文章