Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

将文件上传到服务器需要后端编程，例如php，以及理想情况下的一些JavaScript验证。在这个特殊情况下，CSS并不重要，因为它不会影响任务，只是为了美观。

您需要创建：

一个HTML表单，它将提交multipart / form-data（enctype），理想情况下是post（方法）到服务器上的特定文件（action）
服务器上的文件需要像PHP这样的后端编程来处理上传的文件并将其保存在服务器上的某个位置。
您必须验证您的表单（JavaScript）以及发送到服务器（PHP）的文件和数据，以保护自己免受恶意文件和数据的侵害。

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

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

祝你好运。

Answer 2

您应该将输入标记放入像这样的表单标记

<form action="" enctype="multipart/form-data" method="post">
    <input type="file" name="myInput" id="myInput">
    <input type="submit" value="submit">
</form>

您还需要php（或其他）来恢复服务器上的上传文件。

如何在按钮点击上传文件

2 个答案: