javascript - 如何通过单击按钮上传文件

Question

当用户单击查看按钮时，我正在尝试上传我的文件，如下面的代码所示。我已经尝试过以下代码。任何形式的帮助表示赞赏。谢谢。

#myInput {
  width: 50%;
  padding: 12px 20px 12px 40px;
  border: 1px solid #000;
  display: inline-block;
}

input[type=file]::-webkit-file-upload-button {
  width: 0;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  border: 0px;
}

x::-webkit-file-upload-button,
input[type=file]:after {
  -webkit-appearance: button;
  -moz-appearance: button;
  border-collapse: separate;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  --moz-outline-radius: 7px;
  content: 'View';
  color: #080708;
  background: #e3e3e3;
  text-decoration: none;
  display: inline-block;
  left: 100%;
  margin-left: 50px;
  position: relative;
  padding: 10px 46px 10px 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="myInput" id="myInput">

Answer 1

将文件上传到服务器需要后端编程，例如 PHP，最好还需要一些 JavaScript 验证。在这种特殊情况下，CSS 并不重要，因为它对任务不起任何作用，只是为了美观。

您需要创建:

1. 一个 HTML 表单，它将提交多部分/表单数据 (enctype)，最好以 post(方法)的形式提交到服务器上的特定文件(操作)

2. 服务器上的文件需要PHP等后端编程来处理上传的文件并将其保存在服务器上的某个位置。

3. 您必须验证您的表单 (JavaScript) 以及发送到服务器 (PHP) 的文件和数据，以保护自己免受恶意文件和数据的侵害。

我相信有了这些信息，您可以更好地了解如何完成任务并进行更具体的研究。

这是一个已经存在了一段时间的教程: http://www.tizag.com/phpT/fileupload.php

祝你好运。