在拖放上传过程中需要帮助

时间：2018-09-14 06:45:05

标签： javascript php jquery html css

当我在拖放文件区域中选择并拖放多个文件时，它会转到“上载”文件夹，但是每次上载时，我每次只能在拖放文件区域下看到一个项目。
上传时，我想在拖放文件区域下显示多个文件，而不是一个文件/项目。
我怎样才能做到这一点？

if(file_exists($serverpath))不起作用。不知道为什么
大家可以看看吗？
当文件files中存在文件（if(file_exists($serverpath))）时，当我上载Uploads时，我希望同一上载的文件从0重命名为1,2,3。

当我单击图像时，它会显示一个图像框。 我需要.Crop-Box可调整大小和可拖动。
我正在使用mozilla firefox和google chrome。

代码如下：

*{margin:0; padding:0;}

body{background:black;}

#Container{
           margin:200px auto;
		   width:620px;
		   padding-bottom:20px;
		   background:#ffffff;
		   color:black;
		   border:1px solid gray;
		   border-radius:5px;
		  }
		  
#Text{
      margin:20px;
	  color:green;
	  font-family:verdana;
	  font-size:12pt;
	 }
	 
#Drop{
      margin:20px auto;
	  padding:20px;
	  color:gray;
	  width:500px;
	  height:40px;
	  background:#f1f1f1;
	  border:1px dotted #ccc;
	  border-radius:5px;
	 }
	 
.progressbar{
             margin:20px auto;
			 width:80%;
			 height:20px;
			 background:#ddd;
			 border-radius:5px;
			 display:none;
			}
			
.progress{
          width:0%;
		  height:20px;
		  border-radius:5px;
		  background:linear-gradient(to bottom, lightblue, #2196f3);
		 }
		 
.progresstext{
              float:right;
			 }

.InsertInto{
            margin-top:20px;
		   }
			 
.image{
       margin:20px;
	   width:15%;
	   height:20%;
	   display:none;
	  }

.FileDiv{
         margin-bottom:20px;
		}
	  
.filenam{
		 position:absolute;
		 margin-top:-57px;
		 margin-left:140px;
	    }
			 
#RealFile{
          margin:20px;
	      display:none;
	     }
	 
#UploadImage{
             margin-left:100px;
			 padding:20px 200px;
			 background:#2196f3;
			 color:white;
			 border:none;
			 border-radius:5px;
			 cursor:pointer;
			}

button:focus{
           outline:none;
		  }
			
#Submit{
		margin-left:100px;
		padding:20px 200px;
	    background:#219549;
	    color:white;
		border:none;
		border-radius:5px;
		cursor:pointer;
	   }
	   
.Crop-Main{
		   position:relative;
		   width:600px;
		   min-width:600px;
		   height:520px;
		   margin:100px auto;
		   padding:20px;
		   background:#f1f1f1;
		   color:black;
		   border:1px solid #ccc;
		   border-radius:5px;
		   z-index:1;
		   display:none;
		  }

#Close{
       background:#2196f3;
	   color:white;
	   padding:10px;
	   font-family:verdana;
	   font-size:12pt;
	   cursor:pointer;
	   border-radius:5px;
	   margin:20px;
	   margin-right:0px;
	   float:right;
	   user-select:none;
	  }
		  
.Crop-Container{
                position:relative;
				width:600px;
				margin:80px auto;
				min-height:300px;
			   }

.Crop-Container img{
                   width:600px;
				   user-select:none;
				  }
				  
.Crop-Box{
          position:absolute;
		  width:200px;
		  height:200px;
		  top:0;
		  left:0;
		  background:rgba(69,69,69,0.6);
		  border:1px solid white;
		  z-index:2;
		  cursor:move;
		 }
		 
#Save{
      position:absolute;
	  padding:20px 80px;
	  background:green;
	  color:white;
	  border:none;
	  border-radius:5px;
	  font-family:verdana;
	  font-size:12pt;
	  cursor:pointer;
	  margin:-70px 200px;
	 }
	 
.InsertInto img{
               cursor:pointer;
			  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="style.css"/>

<script src="jquery.min.js"></script>

<body>



<div class="Crop-Main">

<span id="Close">X</span>

<div class="Crop-Container">

<img src=""/>

<div class="Crop-Box"></div>

</div>

<button id="Save" onclick="save()">Save</button>

</div>




<div id="Container">

<div id="Text">Advanced File Uploader</div>

<div id="Drop">Drop files here</div>

<div class="progressbar">

<div class="progress"></div>

<div class="progresstext">0%</div>

</div>



<div class="InsertInto">

</div>


<input type="file" name="realfile" id="RealFile" multiple="true"><br/><br/>

<button id="UploadImage" type="button">Upload</button>

<br/><br/>


<form action="uploads.php" method="POST" id="myForm" enctype="multipart/form-data">



<input type="submit" name="submit" id="Submit" value="Submit">

</form>

</div>

<script>
var obj = document.querySelector("#Drop");

var realf = document.querySelector("#RealFile");

obj.ondragover = function(e){

$(this).css("border-color","green");

return false;	

}

obj.ondragleave = function(e){

return false;

$(this).css("border","none");	

}

obj.ondrop = function(e){

e.preventDefault();

$(this).css("border-color","#2196f3");	

var files = e.dataTransfer.files;

upload(files);

console.log(files);

}



realf.onchange = function(e){

var files = e.currentTarget.files;

upload(files);

console.log(files);

}



function upload(e){

var formdata = new FormData();

var xhttp = new XMLHttpRequest();

var i;

for(i=0; i < e.length; i++){

formdata.append("realfile[]", e[i]);

}

if(xhttp.upload){

xhttp.open("POST", "upload.php", true);

xhttp.upload.addEventListener("progress", function(e){

var parcent = (e.loaded / e.total) * 100;

document.querySelector(".progressbar").style.display = "block";

document.querySelector(".progress").style.width = parcent+"%";

document.querySelector(".progresstext").innerHTML = parcent+"%";

});

xhttp.onreadystatechange = function(){

if(xhttp.readyState == 4 && xhttp.status == 200){

var result;

result = this.responseText;

var newresult = JSON.parse(result);

var i;

document.querySelector(".progressbar").style.display = "none";

var insertinto = document.querySelector(".InsertInto");

var filediv = document.createElement("DIV");

filediv.className = "FileDiv";

insertinto.appendChild(filediv);

var img = document.createElement("IMG");

img.className = "image";

filediv.appendChild(img);

img.setAttribute("src",newresult.url);

img.setAttribute("width","100%");

img.setAttribute("height","100%");

img.style.display = "block";

img.addEventListener("click", function(e){

var cropmain = document.querySelector(".Crop-Main");

cropmain.style.display = "block";

document.querySelector("#Container").style.display = "none";

var imgsrc = $(this).attr("src");

$(".Crop-Container img").attr("src", imgsrc);

});

var close = document.querySelector("#Close");

close.addEventListener("click", function(e){

document.querySelector(".Crop-Main").style.display = "none";

document.querySelector("#Container").style.display = "block";

});


var filenam = document.createElement("DIV");

filenam.className = "filenam";

filenam.innerHTML = newresult.name;

insertinto.appendChild(filenam);

if(newresult != "" && newresult != "Not Ok"){

for(i=0; i<newresult.length; i++){

if(newresult[i].status == true){



}

}

}








console.log(xhttp.responseText);

}

}

xhttp.send(formdata);

}

}

$("#UploadImage").click(function(e){

$("#RealFile").click();

});

$(".InsertInto").on("click", ".InsertInto img", function(){

var img = $(this).attr("src");

$(".Crop-Container").find("img").attr("src", img);

var w = $(".Crop-Container img").width();

var h = $(".Crop-Container img").height();

$(".Crop-Container").width(w);

$(".Crop-Container").height(h);



document.querySelector(".Container").style.display = "none";

document.querySelector(".Crop-Main").style.display = "block";

});


</script>

</body>

</html>

PHP 

<?php

$status = array();

$allow = array("image/jpeg", "image/png");


	
	//print "<pre>"
	//print_r($_FILES["file"]);
	//print "</pre>"
	
	foreach($_FILES["realfile"]["name"] as $pos => $val){
		
		if(!in_array(strtolower($_FILES["realfile"]["type"][$pos]), $allow)){
			
			$status = array(
						 
						    "name" => $_FILES["realfile"]["name"],						 
						    "type" => $_FILES["realfile"]["type"],
						    "url" => "",
						    "message" => "Invalid file type",
						    "status" => false
						 
						  );
			
		}
		else{
			
			$tmpname = $_FILES['realfile']['tmp_name'][$pos];
			
			$filename = $_FILES["realfile"]["name"][$pos];
			
			//$path = "Uploads/".$filename;
			
			$addition = 0;
			
			$serverpath = $_SERVER['DOCUMENT_ROOT']."Uploads/".$filename;
			
			if(file_exists($serverpath)){
				
				while(file_exists($serverpath)){
					
					$addition = $addition + 1;
					
					$info = pathinfo($serverpath);
					
					$directory = $info["dirname"];
									
					$oldname = $info["filename"];

					$oldext = $info["extension"];
					
					$serverpath = $directory."/".$oldname.$addition.".".$oldext;
	
				}
				
				$serverpath = "Uploads/".$oldname.$addition.".".$oldext;
				
				
				
			}
			else{
				
				$serverpath = "Uploads/".$filename;
				
			}
			
			move_uploaded_file($tmpname, $serverpath);
				
				$status = array(
						 
						        "name" => $_FILES["realfile"]["name"][$pos],						 
						        "type" => $_FILES["realfile"]["type"][$pos],
						        "url" => $serverpath,
						        "message" => "File Uploaded",
						        "status" => true
						 
						      );
				
		}
	
      
	
	}

	
echo json_encode($status);	
?>

0 个答案:

没有答案
相关问题
最新问题