这篇文章主要为大家详细介绍了js实现拖拽上传图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
直接把本地图片拉到你设定的图片上传成功后的位置，就ok了，具体代码如下
网趣网上购物系统支持PC电脑版+手机版+APP，数据一站式更新，支持微信支付与支付宝支付接口，是专业的网上商城系统，网趣商城系统支持淘宝数据包导入，实现与淘宝同步更新!支持上传图片水印设置、图片批量上传功能，同时支持订单二次编辑以及多级分类隐藏等实用功能，新版增加商品大图浏览与列表显示功能，使分类浏览更方便，支持最新的支付宝即时到帐接口。
0
<!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+='@@##@@';
}
}
</script>
</body>
</html>以上就是JavaScript实现图片拖拽上传的方法的详细内容，更多请关注php中文网其它相关文章！
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
985
收藏
