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

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 接收到文件，您必须将表单方法设置为 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