Maison > Article > interface Web > Comment implémenter le téléchargement d'images par glisser-déposer à l'aide de JavaScript

Comment implémenter le téléchargement d'images par glisser-déposer à l'aide de JavaScript

巴扎黑original: 2017-08-07 16:45:532318parcourir

Cet article présente principalement la fonction glisser-déposer de js pour télécharger des images pour tout le monde. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Extrayez directement les images locales vers vos paramètres. L'image est téléchargée avec succès, tout ira bien. Le code spécifique est le suivant

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Réécriture d'URL pour implémenter la transformation du code de vérificationArticle suivant：Réécriture d'URL pour implémenter la transformation du code de vérification

Articles Liés

Voir plus