如何在Dropzone JS服务器上显示现有文件？
提问于 2022-02-15 09:46:12
在这个博客中，我将教您如何在下拉区域js中显示服务器上的现有文件或图像。我将学习在php中的下拉区域js上向您展示现有的图像。您可以简单方便地使用下拉区域js在服务器上上传文件或图像。如果您使用下拉区域js上传文件和图像，那么您可能需要使用php mysql从数据库中显示现有文件或图像。
您将只创建两个文件和一个“上传”文件夹来完成此示例，因此只需遵循下面的示例。
创建Index.php文件
<!DOCTYPE html>
<html>
<head>
<title>How to Display Existing Files on Server in Dropzone JS - NiceSnippets.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.css' type='text/css' rel='stylesheet'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js' type='text/javascript'></script>
<style type="text/css">
.dz-preview .dz-image img{
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container" >
<h1>How to Display Existing Files on Server in Dropzone JS - NiceSnippets.com</h1>
<div class='content'>
<form action="upload.php" class="dropzone" >
</form>
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;
$(".dropzone").dropzone({
init: function() {
myDropzone = this;
$.ajax({
url: 'upload.php',
type: 'post',
data: {request: 'fetch'},
dataType: 'json',
success: function(response){
$.each(response, function(key,value) {
var mockFile = { name: value.name, size: value.size};
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, value.path);
myDropzone.emit("complete", mockFile);
});
}
});
}
});
</script>
</body>
</html>创建upload.php文件
<?php
/* Upload directory*/
$targetDir = "upload/";
$request = "upload";
if(isset($_POST['request'])){
$request = $_POST['request'];
}
/* Upload file */
if($request == "upload"){
$msg = "";
if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetDir.$_FILES['file']['name'])) {
$msg = "Successfully uploaded";
}else{
$msg = "Error while uploading";
}
echo $msg;
exit;
}
/* Read files from */
if($request == 'fetch'){
$fileList = [];
$dir = $targetDir;
if (is_dir($dir)){
if ($dh = opendir($dir)){
while (($file = readdir($dh)) !== false){
if($file != '' && $file != '.' && $file != '..'){
$file_path = $targetDir.$file;
if(!is_dir($file_path)){
$size = filesize($file_path);
$fileList[] = ['name'=>$file, 'size'=>$size, 'path'=>$file_path];
}
}
}
closedir($dh);
}
}
echo json_encode($fileList);
exit;
}
回答 1
Stack Overflow用户
发布于 2022-02-15 10:20:45
这是因为react的内部函数--本机-工作日--选择器会变异相同的对象(在您的例子中是repeatDays)传递给库。请看这里
考虑到，在呈现组件之前，您正在设置一个新的状态-- React比较prev值和当前值，但是由于它具有相同的引用，所以它不会重新生成
const RepeatDaysHandle = (repeatDays) => {
console.log(repeatDays);
setWeekDays({...repeatDays});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71131065
复制相关文章
点击加载更多
腾讯云开发者
