关于前端上传文件全面基础扫盲贴（入门）

前言

为什么分章节写呢？因为覆盖的知识点比较多，也可能我力尽详细介绍，照顾下基础不好的人，温故而知新。

刚开始的确是打算一篇搞定的，写道一半发觉已经相当长篇大论了，好多人例如我一进来看到这么多内容就已经怕了，而且不是每个人都需要了解全部内容，于是就打算分开来，让读者按需了解吧。

至于为什么会有零这一章节呢？因为实在太基础了，大多数人都可以无视，仅供少部分新手跟记性不好的人，如果你觉得你可以就跳过吧。

下面开始说正事上传对我来说一直是个挺恐怖的东西,接触的也比较少,因为以前没有标准,为了实现一个上传得写各种恶心兼容代码,而插件往往容易有些bug也没能力修改,时至今日,真正的勇士始终得直面鲜血淋漓的现实,所以我就特意开个扫盲贴,研究总结一下关于上传得小知识,下面带大家浏览一下我需要使用到的一些API.

零, 基础(知识点主要来源于w3school)(已经熟悉的人直接跳过这一章节吧)

标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。

详情查阅请狠狠地点击关于form

label

Male

Girl

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 标签的 for 属性应当与相关元素的 id 属性相同。

详情查阅请狠狠地点击关于label

input

  Volvo
  Saab
  Fiat
  Audi



</pre>

<p>标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、码后的文本控件、单选按钮、按钮等等。</p>
<p>详情查阅请狠狠地点击<a rel="external nofollow" target="_blank" href="https://www.iwyv.com/d/files/20220206/r12ujsn2hzq.cn/tags/tag_input.asp">关于input</a></p>

<pre class="brush:xhtml;">
<input type="submit" value="Submit"></pre>

<p>Submit 对象代表 HTML 表单中的一个提交按钮,在表单提交之前，触发 onclick 事件句柄，并且一个句柄可以通过返回 fasle 来取消表单提交。</p>
<p>submit: 把表单数据提交到 Web 服务器。该方法提交表单的方式与用户单击 Submit 按钮一样，但是表单的 onsubmit 事件句柄不会被调用。</p>
<p>详情查阅请狠狠地点击<a rel="external nofollow" target="_blank" href="https://www.iwyv.com/d/files/20220206/r12ujsn2hzq.cn/jsref/dom_obj_submit.asp">关于submit</a></p>

<pre class="brush:xhtml;">
<button type="button">Click Me!</button>
</pre>

<p>在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。</p>
<p><button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。</p>
<p>唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。</p>
<p>请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit".</p>
<p>(重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。)</p>
<p>
<table>
    <thead>
        <tr>
            <th>字段</th>
            <th>描述</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>name</td>
            <td>规定按钮的名称</td>
        </tr>
        <tr>
            <td>disabled</td>
            <td>规定应该禁用该按钮</td>
        </tr>
    </tbody>
</table>
</p>
<p>详情查阅请狠狠地点击<a rel="external nofollow" target="_blank" href="https://www.iwyv.com/d/files/20220206/r12ujsn2hzq.cn/tags/tag_button.asp">关于button</a></p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持潘少俊衡。</p>
						
						
						<span id="art_bot" class="jbTestPos"></span> 
        </div>
        <div class="pagebar">  </div>
        <div class="pcd_ad"><script src=/d/js/acmsd/thea14.js></script></div>
        <div class="mbd_ad">
          <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5850285417076520"
     data-ad-slot="9825815134"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
        </div>
        <div class="rights">
          <h5>版权声明</h5>
          <p>本文仅代表作者观点，不代表本站立场。<br>
            本文系作者授权发表，未经许可，不得转载。<br>本文地址：/web/html5/76839.html</p>

<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{},"image":{"viewList":["fbook","twi","linkedin","qzone","tsina","douban","weixin","evernotecn"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?'];</script>

        </div>


<div class="r-pn-post">
               
<div class="shang"><a title="HTML5新增的标签和属性归纳总结" href="/web/html5/76836.html" rel="bookmark" class="prev_p"><span>上一篇 :</span> HTML5新增的标签和属性归纳总结 
</a></div>
<div class="xia"><a href="/web/html5/76842.html" rel="bookmark" class="next_p"><span>下一篇 :</span> 浅谈cookie和localStorage那些事</a></div>

              
              <div class="clear"></div>
            </div>
      </div>
      <div class="related">
        <h4>相关文章</h4>
        <ul>
                </ul>
      </div>
      <div class="post_comments">
        <div id="comment">
<link href="/skin/ecmspl/css/pl.css" rel="stylesheet">
<div class="showpage" id="plpost">
<table width="100%" border="0" cellpadding="0" cellspacing="0"  style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;">
<tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr>
</table>
<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script>
<form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">
<tr>
<td>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>
<script src="/e/pl/loginjspl.php"></script>
<textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!">
   


验证码：