如何添加簡單的圖片上傳功能？

Question

我想給我的新網站一個功能，使我可以通過按鈕上傳1張圖片，並將該圖片存儲（本地存儲）在另一個.html頁面上，然后，如果我獲取了它的絕對URL ，則可以將其發布到論壇網站上，在該網站上進行預覽顯示，到目前為止，我有一個讓我上傳和預覽圖像的功能。但是我想轉到另一個層次。

HTML：

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

Javascript：

<script>
   function previewFile(){
   var preview = document.querySelector('img'); //selects the query named img
   var file    = document.querySelector('input[type=file]').files[0]; //sames as here
   var reader  = new FileReader();

   reader.onloadend = function () {
       preview.src = reader.result;
   }

   if (file) {
       reader.readAsDataURL(file); //reads the data as a URL
   } else {
       preview.src = "";
   }
  }

   previewFile();  //calls the function named previewFile()
  </script>

摘要：上傳圖像，將其存儲（本地存儲），然后獲取它的絕對URL並將其粘貼到另一個網站上以獲取該圖像的預覽。

Answer 1

第1部分：上傳

將文件上傳到PHP很容易。 要為用戶提供選項，必須將文件輸入添加到HTML表單。 這是一個例子：

<input type="file" name="picture" />

為了確保PHP接收到文件，您必須將form方法設置為POST並將enctype設置為multipart / form-data

<form action="receiver.php" method="POST" enctype="multipart/form-data">

如果要通過javascript上傳，則可能要使用AJAX。 這是示例的帖子： https : //stackoverflow.com/a/6960586/3797667

第2部分：接收（receiver.php）

可以通過$_FILES[]訪問上載的文件。 這是一個例子：

if(isset($_FILES['image'])){//Checks if file is set
  $errors= array();
  $file_name = $_FILES['image']['name'];
  $file_size =$_FILES['image']['size'];
  $file_tmp =$_FILES['image']['tmp_name'];
  $file_type=$_FILES['image']['type'];
  $file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));
  //(above) checks file extension by getting text after last dot

  $expensions= array("jpeg","jpg","png");//supported file types

  if(in_array($file_ext,$expensions)=== false){//is the extension in the supported types
     $errors[]="extension not allowed, please choose a JPEG or PNG file.";
  }

  if($file_size > 2097152){//PHP only supports files under 2MB
     $errors[]='File size must be excately 2 MB';
  }

  //If there's no error moves files to folder "images" in the root of this file, else prints all the errors
  if(empty($errors)==true){
     move_uploaded_file($file_tmp,"images/".$file_name);
     echo "Success";
  }else{
     print_r($errors);
  }
}

有關文件管理的更多方法，請檢查此鏈接： http : //php.net/manual/en/ref.filesystem.php

第3部分：訪問

如果您想獲取文件的URL，則可能需要查看此文章： PHP動態獲取將包含在其他文件中的特定文件的完整絕對URL路徑。

如果您覺得自己需要更多信息，請在下面發表評論，我將對其進行更新。 祝您的項目好運！

資料來源：

http://www.tutorialspoint.com/php/php_file_uploading.htm