在input的files中，只有把图片移到input的区域中才能上传，有什么方式能控制图片上传的拖动放置区域？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.warp {
position: relative;
display: inline-block;
text-align: center;
background-color: rgb(251, 253, 255);
border: 1px dashed #c0ccda;
border-radius: 6px;
box-sizing: border-box;
width: 148px;
height: 148px;
line-height: 148px;
}
.warp:hover{
border: 1px dashed rgb(64,158,255);
}
.warp-content {
position: absolute;
left: 60px;
font-size: 28px;
color: rgb(140, 147, 157);
line-height: 148px;
text-align: center;
}
input {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.img_ul{
margin: 0px;
padding: 0px;
display: inline-block;
}
.img_li{
position: relative;
display: inline-block;
margin-right: 8px;
background-color: rgb(251, 253, 255);
border: 1px solid rgb(192, 204, 218);
border-radius: 6px;
box-sizing: border-box;
width: 148px;
height: 148px;
overflow: hidden;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.picture{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
width: 100%;
}
.zhezha{
width: 100%;
height: 100%;
display: none;
position: absolute;
left: 0;
top: 0;
background: rgba(0,0,0,0.7);
z-index: 2222;
}
.zhezha2{
width: 100%;
height: 100%;
display: block;
position: fixed;
left: 0;
top: 0;
background: rgba(0,0,0,0.7);
z-index: 2222;
}
.zhezha3{
width: 100%;
height: 100%;
display: none;
position: absolute;
left: 0;
top: 0;
background: rgba(0,0,0,0.7);
z-index: 5555;
}
.fangda{
height: 70%;
display: block;
position: fixed;
left: 0;
top: 15%;
background: rgba(0,0,0,0.7);
z-index: 2223;
}
.icon1{
left: -30%;
}
.fd{
right: -30%;
}
.icon1,.fd{
width: 22px;
height: 22px;
position: absolute;
top: 40%;
cursor: pointer;
z-index: 3333;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.img_li:hover .zhezha{
display: block;
}
.img_li:hover .icon1{
left: 30%;
}
.img_li:hover .fd{
right: 30%;
}
.fileBox{
display: inline-block;
position: relative;
}
</style>
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jquery-ui-1.10.3.min.js"></script>
</head>
<body>
<div class="fileBox" >
<div class="zhezha3"></div>
<div class="img_area">
<ul class="img_ul">
<!-- <li class="img_li">-->
<!-- <img class="picture" src="" alt="">-->
<!-- <div class="zhezha"></div>-->
<!-- <svg onclick="del(this)" t="1609744633190" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3925" width="200" height="200">-->
<!-- <path d="M599.733333 128A61.653333 61.653333 0 0 1 661.333333 189.6V192H362.666667v-2.4A61.653333 61.653333 0 0 1 424.266667 128h175.466666m0-64h-175.466666A125.653333 125.653333 0 0 0 298.666667 189.6V256h426.666666V189.6A125.653333 125.653333 0 0 0 599.733333 64z" fill="#ffffff" p-id="3926"></path>-->
<!-- <path d="M928 192H96a32 32 0 0 0 0 64h832a32 32 0 0 0 0-64zM394.666667 394.666667a32 32 0 0 0-32 32v320a32 32 0 0 0 64 0V426.666667a32 32 0 0 0-32-32zM629.333333 394.666667a32 32 0 0 0-32 32v320a32 32 0 0 0 64 0V426.666667a32 32 0 0 0-32-32z" fill="#ffffff" p-id="3927"></path>-->
<!-- <path d="M821.333333 341.333333a32 32 0 0 0-32 32v416a106.666667 106.666667 0 0 1-106.666666 106.666667H341.333333a106.666667 106.666667 0 0 1-106.666666-106.666667V373.333333a32 32 0 0 0-64 0v416a170.666667 170.666667 0 0 0 170.666666 170.666667h341.333334a170.666667 170.666667 0 0 0 170.666666-170.666667V373.333333a32 32 0 0 0-32-32z" fill="#ffffff" p-id="3928" >-->
<!-- </path></svg>-->
<!-- <svg t="1609744697945" class="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5461" width="200" height="200">-->
<!-- <path d="M950.221 902.552L679.275 631.606c49.481-60.042 79.2-136.978 79.2-220.856 0-191.919-155.582-347.5-347.5-347.5-191.919 0-347.5 155.581-347.5 347.5 0 191.918 155.581 347.5 347.5 347.5 84.273 0 161.538-30.002 221.702-79.903l270.874 270.874c12.888 12.887 33.782 12.887 46.67 0 12.886-12.888 12.886-33.783 0-46.669zM98.476 410.75c0-172.589 139.911-312.5 312.5-312.5 172.588 0 312.5 139.911 312.5 312.5 0 172.588-139.912 312.5-312.5 312.5-172.59 0-312.5-139.911-312.5-312.5z" fill="#ffffff" p-id="5462"></path>-->
<!-- </svg>-->
<!-- </li>-->
</ul>
<div class="warp">
<span class="warp-content">+</span>
<input type="file" id="file" multiple="multiple" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var flag = 0;
$("#file").on("change",function () {
// $(".fileBox").on("mouseover",function () {
// $(".zhezha3").css("display","block");
// })
for(var i=0;i<this.files.length;i++){
var fileData = this.files[i];
var reader = new FileReader();
flag = parseInt(flag)+i+1;
reader.readAsDataURL(fileData);
(function (i) {
reader.onload =function () {
var imgfor = this.result;
var imghtml = ` <li class="img_li">
<img class="picture picture`+(i+parseInt(flag))+`" src="`+imgfor+`" alt="">
<div class="zhezha"></div>
<svg t="1609744633190" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3925" width="200" height="200">
<path d="M599.733333 128A61.653333 61.653333 0 0 1 661.333333 189.6V192H362.666667v-2.4A61.653333 61.653333 0 0 1 424.266667 128h175.466666m0-64h-175.466666A125.653333 125.653333 0 0 0 298.666667 189.6V256h426.666666V189.6A125.653333 125.653333 0 0 0 599.733333 64z" fill="#ffffff" p-id="3926"></path>
<path d="M928 192H96a32 32 0 0 0 0 64h832a32 32 0 0 0 0-64zM394.666667 394.666667a32 32 0 0 0-32 32v320a32 32 0 0 0 64 0V426.666667a32 32 0 0 0-32-32zM629.333333 394.666667a32 32 0 0 0-32 32v320a32 32 0 0 0 64 0V426.666667a32 32 0 0 0-32-32z" fill="#ffffff" p-id="3927"></path>
<path d="M821.333333 341.333333a32 32 0 0 0-32 32v416a106.666667 106.666667 0 0 1-106.666666 106.666667H341.333333a106.666667 106.666667 0 0 1-106.666666-106.666667V373.333333a32 32 0 0 0-64 0v416a170.666667 170.666667 0 0 0 170.666666 170.666667h341.333334a170.666667 170.666667 0 0 0 170.666666-170.666667V373.333333a32 32 0 0 0-32-32z" fill="#ffffff" p-id="3928" >
</path></svg>
<svg t="1609744697945" class="icon2`+(i+parseInt(flag))+` fd" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5461" width="200" height="200">
<path d="M950.221 902.552L679.275 631.606c49.481-60.042 79.2-136.978 79.2-220.856 0-191.919-155.582-347.5-347.5-347.5-191.919 0-347.5 155.581-347.5 347.5 0 191.918 155.581 347.5 347.5 347.5 84.273 0 161.538-30.002 221.702-79.903l270.874 270.874c12.888 12.887 33.782 12.887 46.67 0 12.886-12.888 12.886-33.783 0-46.669zM98.476 410.75c0-172.589 139.911-312.5 312.5-312.5 172.588 0 312.5 139.911 312.5 312.5 0 172.588-139.912 312.5-312.5 312.5-172.59 0-312.5-139.911-312.5-312.5z" fill="#ffffff" p-id="5462"></path>
</svg>
</li>`;
$(".img_ul").append(imghtml);
$(".picture"+(i+parseInt(flag))).get(0).onload = function(){
var imgh = $(this).css("height");
var imgw = $(this).innerWidth();
if(parseInt(imgh) > parseInt(imgw)){
$(this).css("height","146px");
$(this).css("width","auto");
}
}
$(".icon1").on("click",function () {
$(this).parent().remove();
})
$(".icon2"+(i+parseInt(flag))).on("click",function () {
var fdhtml=`<div class="zhezha2"></div>
<img class="fangda" src="`+imgfor+`" alt="">`;
$("body").append(fdhtml);
var fdw = $(".fangda").innerWidth();
var fdh = $(".fangda").innerHeight();
var getBodyh=$(document).height();
var getBodyw=$(document).width();
if(fdw-fdh<10&&fdw-fdh>-10){
if(getBodyh > getBodyw){
$(".fangda").css("width","60%");
$(".fangda").css("height","auto");
var result=(parseInt(getBodyh)-parseInt($(".fangda").css('height')))/2+"px";
$(".fangda").css("top",result);
$(".fangda").css("left","20%");
}else if(getBodyh < getBodyw){
$(".fangda").css("height","60%");
$(".fangda").css("width","auto");
$(".fangda").css("top","20%");
var result=(parseInt(getBodyw)-parseInt($(".fangda").css('width')))/2+"px";
$(".fangda").css("left",result);
}else{
$(".fangda").css("height","60%");
$(".fangda").css("width","60%");
$(".fangda").css("top","20%");
$(".fangda").css("left","20%");
}
}else{
if(fdw > fdh){
$(".fangda").css("width","60%");
$(".fangda").css("height","auto");
$(".fangda").css("left","20%");
var result=(parseInt(getBodyh)-parseInt($(".fangda").css('height')))/2+"px";
$(".fangda").css("top",result);
}else if(fdw < fdh){
$(".fangda").css("height","80%");
$(".fangda").css("width","auto");
$(".fangda").css("top","10%");
var result=(parseInt(getBodyw)-parseInt($(".fangda").css('width')))/2+"px";
$(".fangda").css("left",result);
}
}
$(document).on("mousedown",function () {
$(".zhezha2").remove();
$(".fangda").remove();
$(document).unbind("mousedown");
// $(".fileBox").unbind("mouseover")
// $(".zhezha3").css("display","none");
})
})
}
})(i)
}
})
})
</script>
</body>
</html>怎么设置input的拖拽区域到filebox
参考GPT和自己的思路：
要控制上传图片的拖动放置区域，可以通过设置 CSS 样式来实现。在 HTML 中，可以将 input 标签嵌套在一个 div 中，并设置该 div 的样式来控制上传区域，如下所示：
<div class="filebox">
<input type="file">
</div>
然后在 CSS 样式表中设置 filebox 的样式：
.filebox {
border: 1px solid #ccc;
width: 200px;
height: 200px;
padding: 20px;
text-align: center;
}
.filebox input[type="file"] {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
通过以上设置，input 的上传区域就被限制在了 file