js picture drag and drop series 3-drag and drop local pictures and upload
js pictures drag and drop series 1-drag and drop pictures back and forth
js pictures drag and drop series 2-drag and drop local pictures and display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: auto;
height: 200px;
width: 200px;
overflow: hidden;
background-color: rgb(120, 138, 101)
}
img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="img" class="box" ondragover="dragOver(event)" ondrop="drop(event)"></div>
<script src="scripts/axios.min.js"></script>
<script>
function dragStart(e) {
e.dataTransfer.setData("id", e.target.id);//将img的id写入
}
function dragOver(e) {
e.preventDefault();//阻止拖拽结束的默认行为，会把文件作为链接打开。
}
function drop(e) {
e.preventDefault();//阻止拖拽结束的默认行为，会把文件作为链接打开。
var id = e.target.id;//得到div的id
var box = document.getElementById(id);//通过id得到div
var file = e.dataTransfer.files[0];//得到文件
var fileReader = new FileReader();
fileReader.readAsDataURL(file);//将file读为url
fileReader.onload = function (ev) {
//为div添加一个图片，图片路径为拖拽的文件路径
var img = document.createElement("img");
img.src = fileReader.result;
box.appendChild(img);
}
// 拖拽图片上传
let filelist2 = event.dataTransfer.files;
let formData = new FormData();
// // 通过循环结构将拖放形成的FileList对象中的File对象,依次
// // 添加到FormData中
for (let n = 0; n < filelist2.length; n++) {
formData.append('upload', filelist2.item(n));
}
console.log(formData)
// 将FormData对象提交到WEB服务器
axios.post('http://127.0.0.1:3000/upload', formData);
}
</script>
</body>
</html>