首页 > 代码库 > H5图片异步拖拽上传
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="http://www.mamicode.com/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= http://www.mamicode.com/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图片异步拖拽上传
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。