suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie das Hochladen von Bildern per Drag-and-Drop mithilfe von JavaScript

So implementieren Sie das Hochladen von Bildern per Drag-and-Drop mithilfe von JavaScript

巴扎黑
巴扎黑Original
2017-08-07 16:45:532442Durchsuche

In diesem Artikel wird hauptsächlich die js-Drag-and-Drop-Funktion zum Hochladen von Bildern vorgestellt. Sie hat einen gewissen Referenzwert.

Ziehen Sie lokale Bilder direkt in Ihre Einstellungen erfolgreich hochgeladen wurde, ist der spezifische Code wie folgt: 


<!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>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Hochladen von Bildern per Drag-and-Drop mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：URL-Umschreibung zur Implementierung der Verifizierungscode-TransformationNächster Artikel：URL-Umschreibung zur Implementierung der Verifizierungscode-Transformation

In Verbindung stehende Artikel

Mehr sehen