이미지의 드래그 앤 드롭 업로드를 구현하는 JavaScript 방법-JS 튜토리얼-php.cn

이미지의 드래그 앤 드롭 업로드를 구현하는 JavaScript 방법

巴扎黑

풀어 주다： 2017-08-07 16:45:53

원래의

2322명이 탐색했습니다.

이 글에서는 누구나 사용할 수 있도록 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(&#39;box&#39;);
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+=&#39;<img src="&#39;+Url+&#39;" alt="">&#39;;
 }
}
</script>
</body>
</html>

로그인 후 복사

위 내용은 이미지의 드래그 앤 드롭 업로드를 구현하는 JavaScript 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!