使用php文件上传表单

Question

我正在开发从相机拍摄照片并将图片上传到服务器的应用程序，所以这是我的代码：-

<form id="theform" action="upload.php" onsubmit="event.preventDefault(); return myFunction();" method="post" enctype="multipart/form-data">
          <input id="file" name="uploadedFile" onchange="uptoserver();" style="display:none;"type="file" accept="image/*" capture="camera">
          <div class="row justify-content-center">
          <button type="submit"  class="btn wbtn border rounded-pill" style="font-family:Hana; font-size:32px;">
            <img src="style\image\camera.png" width="64" />&nbsp;تصوير النمودج&nbsp;
          </button>&nbsp;
          </div>
          </form>

和upload.php :-

<?php 
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedFile']['name']); 
if(move_uploaded_file($_FILES['uploadedFile']['tmp_name'], $target_path)) {
    echo "جاري إضافة الملف  ".  basename( $_FILES['uploadedFile']['name']). 
    " إلى جدول ملف إكسل";
   echo "<script>document.write(readfile(\"".$target_path."\"));</script>";
   $stringPath = $target_path; //PASSING NAME PARAM
    // how can i pass the Name to prepare.php
    printf($stringPath);
} else{
    echo "There was an error uploading the file, please try again!";
}
?>

问题是这个上传脚本正在上传图片，但它的文件损坏了，大小为 0mb，我该如何解决这个问题

Answer 1

您的代码存在一些问题...

onsubmit="event.preventDefault(); ...

...阻止表单将<input type="file" ...提供的文件提交给action的表单目标：upload.php 常规方式，比如点击submit按钮。

~

echo "..." . basename( $_FILES['uploadedFile']['name']) . "...";
echo "<script>document.write(readfile(\"".$target_path."\"));</script>";
$stringPath = $target_path; //PASSING NAME PARAM
printf($stringPath);

...您的 upload.php 文件只写一个字符串，如果调用得当，它会通过 HTTP 从服务器发送到浏览器。

此时没有执行任何 Javascript。

如果浏览器通过加载页面调用upload.php，您将离开当前页面并仅在浏览器中加载该字符串。如果浏览器通过XHR或Fetch调用upload.php，页面仍然存在，但您需要使用Javascript捕获STRING并对其进行处理。

~

echo "<script>document.write(readfile(\"".$target_path."\"));</script>";

在服务器上的 PHP 文件中，您正在编写一串 Javascript 代码，该代码将作为文本发送到浏览器，以便稍后在浏览器中执行。浏览器得到类似的东西：

<script>document.write(readfile("uploads/filename.png"));</script>

使用 PHP 将 Javascript 字符串发送到浏览器是可以的——但问题是您在服务器上提供了一个文件路径。一旦 Javascript 字符串到达​​浏览器并进行评估，它就无法访问服务器文件和目录结构，例如：uploads/filename.png

由于您尝试执行名为 readfile(...) 的 Javascript 函数，您似乎正在尝试使用 Javascript FileReader 访问上传到服务器的文件，但 FileReader 仅处理客户端上的文件 /em>，并通过 Javascript 文件或 Blob 对象、input type="file" 元素或drag and drop 进程提供。

---

请记住，PHP 在服务器上执行，只有文本被发送到浏览器。然后浏览器从服务器接收文本并处理并呈现它。

服务器端的 PHP 上下文无法执行 Javascript，客户端的浏览器上下文（Javascript/DOM 事件）也无法执行 PHP。

两者之间只有一个文本通道。 文本通道 仅由页面加载调用，或者通过使用XHR 或Fetch 在没有页面加载的情况下调用。如果您使用 XHR 或 Fetch，则需要使用 Javascript 来处理从服务器接收到的文本。

---

要拍照，将其上传到服务器，并在页面上显示照片，无需重新加载页面：

camera.html

<input type="file" id="campic" accept="image/*" capture="camera">

<script>

var campic = document.querySelector("#campic");

campic.onchange = function () {
  var file = campic.files[0];
  upload(file);
  displayAsImage(file);
};

function upload (file) {
  var form = new FormData(),
      xhr = new XMLHttpRequest();

  form.append('image', file);
  xhr.open('post', 'upload.php', true);
  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);
    }
  }
  xhr.send(form);
}

function displayAsImage (file) {
  var imgURL = URL.createObjectURL(file),
      img = document.createElement('img');

  img.onload = function () {
    URL.revokeObjectURL(imgURL);
  };

  img.src = imgURL;
  document.body.appendChild(img);
}
</script>

上传.php

<?php 

$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedFile']['name']); 

if ( move_uploaded_file($_FILES['uploadedFile']['tmp_name'], $target_path) ) {
    echo "File uploaded.";
} 
else {
    echo "Error uploading the file.";
}

?>

在此处获取有关此方法的更多信息：How to use HTML5 to capture a camera image。

Answer 2

您可以使用此代码来处理上传文件

<?php
  
  if ($_SERVER['REQUEST_METHOD'] !== 'POST')
  {
      echo "Empty data, please select file";
      die;
  }

  if (!isset($_FILES["fileupload"]))
  {
      echo "Wrong data struct";
      die;
  }

  if ($_FILES["fileupload"]['error'] != 0)
  {
    echo "Uploaded data error";
    die;
  }
  $target_dir    = "uploads/";
  $target_file   = $target_dir . basename($_FILES["fileupload"]["name"]);
  $allowUpload   = true;
  $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
  $maxfilesize   = 800000;
  $allowtypes    = array('jpg', 'png', 'jpeg', 'gif');

  if(isset($_POST["submit"])) {
      $check = getimagesize($_FILES["fileupload"]["tmp_name"]);
      if($check !== false)
      {
          //
      }
      else
      {
          echo "This's not image file.";
          $allowUpload = false;
      }
  }

  if (file_exists($target_file))
  {
      echo "File already exist, don't allow overwrite";
      $allowUpload = false;
  }
  if ($_FILES["fileupload"]["size"] > $maxfilesize)
  {
      echo "Please upload file less than $maxfilesize (bytes).";
      $allowUpload = false;
  }

  if (!in_array($imageFileType,$allowtypes ))
  {
      echo "Only allow file type: JPG, PNG, JPEG, GIF";
      $allowUpload = false;
  }

  if ($allowUpload)
  {
      if (move_uploaded_file($_FILES["fileupload"]["tmp_name"], $target_file))
      {
          echo "File ". basename( $_FILES["fileupload"]["name"]). " uploaded success.";

      }
      else
      {
          echo "Error when upload file.";
      }
  }
  else
  {
      echo "Error upload, may be large filesize, or wrong file type...";
  }
?>