【问题标题】:How do I add a simple image upload feature?如何添加简单的图片上传功能?
【发布时间】:2016-01-01 21:21:55
【问题描述】:

我想给我的新网站一个功能,我可以通过一个按钮上传一张图片并将图片存储(本地存储)到另一个 .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 将其粘贴到另一个网站以获取该图片的预览。

【问题讨论】:

  • 我认为你需要一个后端来存储图像,除非你只存储 url,在这种情况下我会在 html5 存储中查找w3 schools web storage
  • 我不确定我应该使用什么,如果我得到 abs URL,那么我很好,但是图像必须存储,如果它在本地我必须测试这是否有效,我仍然需要答案
  • 将图像存储在 html 文件中是什么意思?您想将其 base64 表示形式存储在 html 中吗?您需要明确是要将图像存储在后端(将其发送到后端并再次检索)还是存储在前端,只有当前用户才能看到它(网络存储)。网络存储是例如如果您创建一个 JavaScript 图像裁剪页面,用户在哪里打开图像,裁剪它并希望再次将其保存在本地设备上,那就太好了。后端(您的服务器)永远不会看到该图像。
  • @ssc-hrep3 将其存储在本地存储中:D 希望有所帮助

标签: javascript php jquery html css


【解决方案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 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

【讨论】:

  • "some-file.php"
  • some-file.php 是包含下面 PHP 代码的文件的示例名称,我将更新答案以使其更清晰。图片会被输入到输入(type="file"),提交表单时可以在$_FILES数组中找到。
  • 可以在php部分添加cmets吗?我想知道每一行代码的作用或重要部分,如果我了解我可以随时学习/修改的功能,感谢您的帮助,我真的很感激:D
猜你喜欢
  • 2012-01-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-02-03
  • 2019-03-12
  • 2016-12-18
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多