Javascript 如何添加简单的图像上传功能？

我想给我的新网站一个功能，在那里我可以通过一个按钮上传一张图片，并将图片存储在另一个

.html

页面上（本地存储），然后如果我抓到它的绝对URL，我可以将其发布在论坛网站上，预览将显示，到目前为止，我有一个功能，让我上传和预览一张图片。。但我想进入另一个层次

HTML:

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

<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>

Javascript:

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

<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>

函数previewFile（）{
var preview=document.querySelector（'img'）；//选择名为img的查询
var file=document.querySelector（'input[type=file]'）。files[0]；//与此处相同
var reader=new FileReader（）；
reader.onloadend=函数（）{
preview.src=reader.result；
}
如果（文件）{
reader.readAsDataURL（文件）；//将数据作为URL读取
}否则{
preview.src=“”；
}
}
预览文件（）//调用名为previewFile（）的函数

---

摘要：上传图像，存储它（本地存储），然后抓取它的绝对URL将其粘贴到另一个网站上，以获得该图像的预览。

第1部分：上传

将文件上传到PHP很容易。要为用户提供选项，必须向HTML表单添加文件输入。下面是一个例子：

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

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);
  }
}

有关文件管理的更多方法，请查看此链接：

第3部分：访问

如果要获取文件的URL，您可能需要查看此帖子：

如果你觉得需要更多信息，请在下面发表评论，我会更新帖子。祝你的项目好运

来源：

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

<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，在这种情况下，我会查看html5存储我不确定我应该使用什么，如果我得到abs url，那么我很好，但是图像必须存储，如果它是本地的，我必须测试它是否有效，我仍然需要一个答案，你将图像存储在html文件中是什么意思？是否要将其base64表示存储在html中？您需要澄清是希望将图像存储在后端（将其发送到后端并再次检索）还是只有当前用户才能看到的前端（web存储）。例如，如果您创建一个JavaScript图像裁剪页面，用户可以在其中打开图像，裁剪图像，并希望在本地设备上再次保存图像，那么Web存储就是一个不错的选择。后端（您的服务器）永远看不到该图像。@ssc-hrep3将其存储在本地存储器中：D希望这有助于“some file.php”

some file.php

是包含以下php代码的文件的示例名称，我将更新答案以使其更清楚。图像将被输入到输入中（

type=“file”

），提交表单时，可以在

$\u FILES

数组中找到它。您可以在php部分添加注释吗？我想知道每一行代码都做了些什么，或者重要的部分是什么，如果我理解了我可以边学边改的功能，谢谢你的帮助，我真的很感激：D