Rumah > Artikel > hujung hadapan web > JavaScript实现图片拖拽上传的方法

JavaScript实现图片拖拽上传的方法

巴扎黑asal: 2017-08-07 16:45:532317semak imbas

这篇文章主要为大家详细介绍了js实现拖拽上传图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

直接把本地图片拉到你设定的图片上传成功后的位置，就ok了，具体代码如下

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

Atas ialah kandungan terperinci JavaScript实现图片拖拽上传的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：url重写实现验证码变换Artikel seterusnya：JavaScript表单验证功能的介绍

Artikel berkaitan

Lihat lagi