javascript - 如何添加简单的图片上传功能？

我想给我的新网站一个功能，使我可以通过按钮上传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并将其粘贴到另一个网站上以获取该图像的预览。

最佳答案

第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 Dynamically get complete Absolute URL Path for specific file that will be included in other files

如果您觉得自己需要更多信息，请在下面评论，我将更新该帖子。祝您的项目好运！

资料来源：

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