이미지의 드래그 앤 드롭 업로드를 구현하는 JavaScript 방법
- 巴扎黑원래의
- 2017-08-07 16:45:532367검색
이 글에서는 누구나 사용할 수 있도록 js에서 이미지를 업로드하는 드래그 앤 드롭 기능을 주로 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
이미지 업로드가 성공한 후 설정한 이미지로 로컬 이미지를 직접 가져옵니다. . 위치는 괜찮습니다. 구체적인 코드는 다음과 같습니다
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{margin:0; padding:0; list-style:none;}
#box{
width: 600px;
height: 300px;
background: #ccc;
padding: 50px;
}
</style>
</head>
<body>
<p id="box"></p>
<script>
var box=document.getElementById('box');
box.ondragover=function (e){
e.preventDefault();
}
box.ondrop=function (e){
e.preventDefault();
// console.log(e.dataTransfer.files[0]);
var f=e.dataTransfer.files[0];//获取到第一个上传的文件对象
var fr=new FileReader();//实例FileReader对象
fr.readAsDataURL(f);//把上传的文件对象转换成url
fr.onload=function (e){
console.log(e);
// var Url=e.target.result;//上传文件的URL
var Url=this.result;//上传文件的URL
box.innerHTML+='<img src="'+Url+'" alt="">';
}
}
</script>
</body>
</html>위 내용은 이미지의 드래그 앤 드롭 업로드를 구현하는 JavaScript 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.