path: root/files/zh-cn/learn/common_questions/upload_files_to_a_web_server/index.html

---
title: 如何将文件上传到网络服务器
slug: Learn/Common_questions/Upload_files_to_a_web_server
translation_of: Learn/Common_questions/Upload_files_to_a_web_server
---
<div class="summary">
<p>这篇文章将会告诉你如何利用 {{Glossary("FTP")}} 工具来发布你的网站。 </p>
</div>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提:</th>
   <td>你必须知道<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_web_server">什么是网络服务器？</a> 以及<a href="https://developer.mozilla.org/en-US/Learn/Understanding_domain_names">域名是如何工作的</a>。你必须知道如何<a href="https://developer.mozilla.org/en-US/Learn/Set_up_a_basic_working_environment">搭建一个基本环境</a>，还有如何<a href="https://developer.mozilla.org/en-US/Learn/HTML/Write_a_simple_page_in_HTML">写一个简单的网页</a>。</td>
  </tr>
  <tr>
   <th scope="row">目标:</th>
   <td>学习如何将文件上传到FTP服务器。</td>
  </tr>
 </tbody>
</table>

<h2 id="概要">概要</h2>

<p>如果<a href="https://developer.mozilla.org/en-US/Learn/HTML/Write_a_simple_page_in_HTML">你已经建立了一个简单的页面</a>, 你会想将它放到某些网络服务器上。在这章里，我们将讨论如何使用“<strong>FTP</strong>”。</p>

<h2 id="自主学习">自主学习</h2>

<p><em>目前还没有有效的自主学习方法。 <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">请考虑贡献</a>。</em></p>

<h2 id="深入探究">深入探究</h2>

<h3 id="了解FTP客户端：FireFTP">了解FTP客户端：FireFTP</h3>

<p>有很多FTP客户端。我们的demo使用FireFTP演示，因为用FireFTP构建是非常容易的。如果你使用FireFTP,只要<a href="https://addons.mozilla.org/firefox/addon/fireftp/">转到FireFTP插件页面</a>并安装FireFTP。</p>

<div class="note">
<p>当然这有许多其他的选项。参见<a href="https://developer.mozilla.org/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client">发布工具：获取FTP</a>更多的信息。</p>
</div>

<p>在个新的标签中打开FireFTP，FireFTP有两种办法。</p>

<ol>
 <li><strong>Firefox menu <img alt="" src="https://mdn.mozillademos.org/files/9633/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> ➤ <img alt="Developer" src="https://mdn.mozillademos.org/files/9635/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 24px; vertical-align: middle; width: 27px;"> ➤ FireFTP</strong></li>
 <li><strong>Tools </strong>➤ <strong>Web Develope</strong>r ➤ <strong>FireFTP</strong></li>
</ol>

<p>现在你应该可以看到如下界面：</p>

<p><img alt="FireFTP : the interface, not connected to a server" src="https://mdn.mozillademos.org/files/9613/fireftp-default.png" style="height: 800px; width: 1280px;"></p>

<h3 id="登入（Logging_in）">登入（Logging in）</h3>

<p>在这个例子中，我们假设我们的托管提供商（将托管我们的HTTP Web服务器的服务）是一个虚构的公司“Example Hosting Provider”，其URL如下所示：</p>

<p><code>mypersonalwebsite.examplehostingprovider.net</code>.</p>

<p>我们刚刚开通了一个帐户，并从他们那里收到了这些信息：</p>

<blockquote>
<p>恭喜在Example Hosting Provider开设帐户。</p>

<p>你的账户是: <code>demozilla</code></p>

<p>您的网站将在：</p>

<p><code>demozilla.examplehostingprovider.net</code></p>

<p>要发布到此帐户，请使用以下凭据通过FTP进行连接：</p>

<ul>
 <li>FTP 服务: <code>ftp://demozilla.examplehostingprovider.net</code></li>
 <li>用户名: <code>demozilla</code></li>
 <li>密码: <code>quickbrownfox</code></li>
 <li>要在Web上发布，请将文件放入<code>Public / htdocs</code>目录中。</li>
</ul>
</blockquote>

<p>让我们查看一下此网页<code>http://demozilla.examplehostingprovider.net/</code> — 正如你所见，现在这里什么也没有:</p>

<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="height: 233px; width: 409px;"></p>

<div class="note">
<p><strong>注意:</strong> 根据您的托管服务提供商的不同，大部分时间您会看到一个页面，内容如下：“此网站由[托管服务]托管”。</p>
</div>

<p>要将FTP客户端连接到远程服务器，请按“创建帐户...”按钮并使用托管提供商提供的信息填写字段：</p>

<p><img alt="FireFTP: creating an account" src="https://mdn.mozillademos.org/files/9617/fireftp-createlogin.png" style="height: 436px; width: 578px;"></p>

<h3 id="在这里和那里：本地和远程视图">在这里和那里：本地和远程视图</h3>

<p>现在让我们连接这个新创建的帐户：</p>

<p><img alt="The FTP interface, once logged" src="https://mdn.mozillademos.org/files/9619/fireftp-logged.png" style="height: 800px; width: 1280px;"></p>

<p>让我们来看看你所看到的：</p>

<ul>
 <li>在左边，你会看到你的本地文件。 导航到您存储网站的目录（本例中为<code>mdn</code>）。</li>
 <li>在右侧，您会看到远程文件。 我们登录到了我们远程的FTP根目录（在这种情况下，<code>users/ demozilla</code>）</li>
 <li>现在您可以忽略底部区域。 它是您的FTP客户端和服务器之间每次交互的实时日志。</li>
</ul>

<h3 id="上传到服务器">上传到服务器</h3>

<p>您应该记得，我们的主机提供商告诉我们，我们的文件必须存储在<code>Public / htdocs</code>目录中，如右窗格中导航所示：</p>

<p><img alt="Changing to the htdocs folder on the remote server" src="https://mdn.mozillademos.org/files/9623/remote-htdocs-empty.png" style="height: 315px; width: 561px;"></p>

<p>现在，要将文件上传到服务器，请将它们从左侧窗格拖放到右侧窗格中：</p>

<p><img alt="The files show in the remote view: they have been pushed to the server" src="https://mdn.mozillademos.org/files/9625/files-dropped-onto-the-server.png" style="height: 800px; width: 1280px;"></p>

<h3 id="文件都上传成功了吗">文件都上传成功了吗?</h3>

<p>到目前为止，很好，但文件真的在线吗？ 您可以在浏览器中返回您的网站（例如<code>http://demozilla.examplehostingprovider.net/</code>）进行仔细检查：</p>

<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="height: 442px; width: 400px;"></p>

<p>瞧！ 我们的网站已经活灵活现了！</p>

<h3 id="其他方式上传文件">其他方式上传文件</h3>

<p>FTP协议是发布网站的一种众所周知的方法，但不是唯一的方法。 以下是其他一些可能性：</p>

<ul>
 <li> <strong>Web界面</strong>。 作为远程文件上传服务前端的HTML界面。 由您的托管服务提供。</li>
 <li><strong>GitHub</strong>（高级）。 使用 提交/推送 方法的组合上传{{Glossary('git')}} 。 请参阅我们的 “<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web">Web指南入门</a>” 中 <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">发布您的网站</a> 文章。</li>
 <li><strong>{{Glossary("Rsync")}}</strong>（高级）。 本地到远程的文件同步系统。</li>
 <li><strong>{{Glossary('WebDAV')}}。</strong></li>
 <li><strong>{{Glossary('WebDAV')}}</strong>. {{Glossary('HTTP')}}协议的扩展，允许更多的高级文件管理。</li>
</ul>

<h2 id="下一步">下一步</h2>

<p>干得好，你几乎快完成了。 最后一项重要任务是确保您的网站正常工作。</p>

<p> </p>

<p>
 <audio class="hidden"> </audio>
</p>