Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 18ef228494
Fetching contributors…

Cannot retrieve contributors at this time

file 276 lines (261 sloc) 22.967 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276
<!doctype html>
<html id="input.file">
<head>
<meta charset=utf-8>
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD" type="text/css">
<title> input type=file &#8211; file upload control - HTML5</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="prev" href="input.reset.html" title="input type=reset">
<link rel="next" href="input.hidden.html" title="input type=hidden">
<link rel="section" href="Overview.html">
<link rel="contents" href="Overview.html#toc">
<link rel="index" href="index-of-terms.html">
</head>
<body class="chunk" onload="initDfn()">
<div id="jump-indexes" class="no-number no-toc"><div id="jumpIndexA-button" role="button" aria-haspopup="true" tabindex="0">jump</div></div>
<h2 class="chunkpagetitle"><a href="Overview.html#toc">HTML: The Markup Language</a></h2>
<div class="nav">
<span class="nav-prev"><a href="input.reset.html">&#171; input type=reset</a></span>
<span class="nav-next"><a href="input.hidden.html">input type=hidden &#187;</a></span>
</div>
<div class="no-number elementpage section">
      <h2 class="element-head">
<span class="spec-link"><a title="Read about the input element in the HTML5 spec" href="http://dev.w3.org/html5/spec/states-of-the-type-attribute.html#file-upload-state-type-file">&#9432;</a></span> <span class="element">input</span> <span class="elem-qualifier"> <span class="attribute-name">type</span>=<span class="equals-value">file</span></span> &#8211; <span class="shortdesc">file upload control</span> <a class="hash" href="#input.file">#</a> <a class="toc-bak" href="Overview.html#input.file-toc">T</a>
</h2>
      <div id="input.file-longdesc" class="longdesc">
    <p>The
    <span class="element">input</span>
    element
    with a <span class="attribute">type</span> attribute whose
    value is "<code>file</code>"
    represents a list of file items, each consisting of a file
    name, a file type, and a file body (the contents of the
    file).</p>
  </div>
      <div class="no-number no-toc" id="input.file-content-model">
        <h2 class="element-subhead">Permitted contents <a class="hash" href="#input.file-content-model">#</a>
</h2>
<div class="content-models">
        
      <div id="input.file-mdls">
        <p class="elem-mdl"><span>empty (<span><a href="syntax.html#void-element" id="void-element_xref39">void element</a></span>)</span></p>
        </div>
      </div>
</div>
<div class="no-number no-toc" id="input.file-attributes">
        <h2 class="element-subhead">Permitted attributes <a class="hash" href="#input.file-attributes">#</a>
</h2>
        <div class="attr-content-models">
          <p><span class="pattern" id="input.file.attrs"> <span class="agroupof"><a class="ref" href="global-attributes.html">global attributes</a>
                          <span class="postfix intermixed">&amp;</span> <a class="#common-form.attrs.name" title="input.file.attrs.name" href="input.file.html#input.file.attrs.name">name</a>
   <span class="postfix intermixed">&amp;</span> <a class="#common-form.attrs.disabled" title="input.file.attrs.disabled" href="input.file.html#input.file.attrs.disabled">disabled</a>
   <span class="postfix intermixed">&amp;</span> <a class="#common-form.attrs.form" title="input.file.attrs.form" href="input.file.html#input.file.attrs.form">form</a>
                          <span class="postfix intermixed">&amp;</span> <a class="ref" href="input.file.html#input.file.attrs.type" title="input.file.attrs.type">type</a><span class="postfix required" title="REQUIRED">&#9733;</span>
                          <span class="postfix intermixed">&amp;</span> <a class="ref" href="input.file.html#input.file.attrs.accept" title="input.file.attrs.accept">accept</a> </span>
   <span class="postfix intermixed">&amp;</span> <span class="agroupof"><a class="#shared-form.attrs.autofocus" title="input.file.attrs.autofocus" href="input.file.html#input.file.attrs.autofocus">autofocus</a>
                                                                                   <span class="postfix intermixed">&amp;</span> <a class="#shared-form.attrs.required" title="input.file.attrs.required" href="input.file.html#input.file.attrs.required">required</a>
                                                                                   <span class="postfix intermixed">&amp;</span> <a class="#input.attrs.multiple" title="input.file.attrs.multiple" href="input.file.html#input.file.attrs.multiple">multiple</a> </span></span></p>
</div>
        <dl class="attr-defs">
<dt>
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/global-attributes.html#global-attributes">&#9432;</a>
<a class="attribute-name" title="global-attributes" href="global-attributes.html">global attributes</a>
</dt>
            <dd>Any attributes permitted globally.</dd>
          
            <dt id="input.file.attrs.name" title="input.file.attrs.name">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#attr-fe-name">&#9432;</a>
<span class="attribute-name">name</span> = <span class="attr-values"><a href="datatypes.html#data-string" id="data-string_xref33">string</a></span>
<a class="hash" href="input.file.html#input.file.attrs.name">#</a>
</dt>
            <dd>The name part of the name/value pair associated with this
        element for the purposes of form submission.</dd>
          
            <dt id="input.file.attrs.disabled" title="input.file.attrs.disabled">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#attr-fe-disabled">&#9432;</a>
<span class="attribute-name">disabled</span> = <span class="attr-values">
       "disabled"
       <span class="postfix or">or</span> "" <span class="attr-qualifier">(empty string)</span> <span class="postfix or">or</span> <a href="syntax.html#syntax-attr-empty" id="syntax-attr-empty_xref49">empty</a>
    </span>
<a class="hash" href="input.file.html#input.file.attrs.disabled">#</a>
</dt>
            <dd>Specifies that the element represents a disabled
        control.</dd>
          
            <dt id="input.file.attrs.form" title="input.file.attrs.form">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#attr-fae-form">&#9432;</a>
<span class="attribute-name">form</span> = <span class="attr-values">
      <a href="datatypes.html#common.data.idref" id="common.data.idref_xref13">ID reference</a>
    </span> <span class="new-feature" title="This markup feature is newly added in HTML5.">NEW</span>
<a class="hash" href="input.file.html#input.file.attrs.form">#</a>
</dt>
            <dd>The value of the
        <span class="attribute">id</span>
        attribute on the
        <a href="form.html#form">form</a>
        with which to associate the element.</dd>
          
            <dt id="input.file.attrs.type" title="input.file.attrs.type">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/states-of-the-type-attribute.html#file-upload-state-type-file">&#9432;</a>
<span class="attribute-name">type</span> = <span class="attr-values"> "file" </span>
<a class="hash" href="input.file.html#input.file.attrs.type">#</a>
</dt>
            <dd>Specifies that its
        <span class="element">input</span>
        element represents a list of file items.</dd>
          
            <dt id="input.file.attrs.accept" title="input.file.attrs.accept">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/states-of-the-type-attribute.html#attr-input-accept">&#9432;</a>
<span class="attribute-name">accept</span> = <span class="attr-values">
      <a href="datatypes.html#form.data.mimetypelist" id="form.data.mimetypelist_xref1">list of MIME types</a>
    </span>
<a class="hash" href="input.file.html#input.file.attrs.accept">#</a>
</dt>
            <dd>Provides the UA with a hint of what file types the
        server is able to accept.</dd>
          
<dd><div class="datatype-desc">A
        <a href="datatypes.html#data-comma-separated-strings" id="data-comma-separated-strings_xref1">set of comma-separated strings</a>,
        each of which is a valid <a href="datatypes.html#common.data.mimetype" id="common.data.mimetype_xref4">MIME type</a>, with no
        parameters.</div></dd>
            <dt id="input.file.attrs.autofocus" title="input.file.attrs.autofocus">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#attr-fe-autofocus">&#9432;</a>
<span class="attribute-name">autofocus</span> = <span class="attr-values">
       "autofocus"
       <span class="postfix or">or</span> "" <span class="attr-qualifier">(empty string)</span> <span class="postfix or">or</span> <a href="syntax.html#syntax-attr-empty" id="syntax-attr-empty_xref50">empty</a>
    </span> <span class="new-feature" title="This markup feature is newly added in HTML5.">NEW</span>
<a class="hash" href="input.file.html#input.file.attrs.autofocus">#</a>
</dt>
            <dd>Specifies that the element represents a control to which
        a UA is meant to give focus as soon as the document is
        loaded.</dd>
          
            <dt id="input.file.attrs.required" title="input.file.attrs.required">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#the-required-attribute">&#9432;</a>
<span class="attribute-name">required</span> = <span class="attr-values">
       "required"
       <span class="postfix or">or</span> "" <span class="attr-qualifier">(empty string)</span> <span class="postfix or">or</span> <a href="syntax.html#syntax-attr-empty" id="syntax-attr-empty_xref51">empty</a>
    </span> <span class="new-feature" title="This markup feature is newly added in HTML5.">NEW</span>
<a class="hash" href="input.file.html#input.file.attrs.required">#</a>
</dt>
            <dd>Specifies that the element is a required part of form
      submission.</dd>
          
            <dt id="input.file.attrs.multiple" title="input.file.attrs.multiple">
<a class="spec-link" title="Read about this attribute in the HTML5 spec" href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-multiple">&#9432;</a>
<span class="attribute-name">multiple</span> = <span class="attr-values">
       "multiple"
       <span class="postfix or">or</span> "" <span class="attr-qualifier">(empty string)</span> <span class="postfix or">or</span> <a href="syntax.html#syntax-attr-empty" id="syntax-attr-empty_xref52">empty</a>
    </span> <span class="new-feature" title="This markup feature is newly added in HTML5.">NEW</span>
<a class="hash" href="input.file.html#input.file.attrs.multiple">#</a>
</dt>
            <dd>Specifies that the element allows multiple values.</dd>
          
        </dl>
</div>
      
      <div class="no-number no-toc" id="input.file-constraints">
        <h2 class="element-subhead">Additional constraints and admonitions <a class="hash" href="#input.file-constraints">#</a>
</h2>
        <ul class="assertions">
<li><span>
The interactive element <span class="element">input</span> must not
appear as a descendant of the <span class="element">a</span> element.
</span></li>
<li><span>
The interactive element <span class="element">input</span> must not
appear as a descendant of the <span class="element">button</span> element.
</span></li>
<li><span>
Any <span class="element">input</span> element descendant of a <span class="element">label</span> element
with a <span class="attribute">for</span> attribute must have an
ID value that matches that <span class="attribute">for</span> attribute.
</span></li>
          <li><span>
The <span class="attribute">list</span> attribute of the <span class="element">input</span> element must refer to a <span class="element">datalist</span> element.
</span></li>
<li><span>
Element <span class="element">input</span> with attribute <span class="attribute">type</span>
whose value is &#8220;button&#8221; must have non-empty attribute <span class="attribute">value</span>.
</span></li>
          <li><span>
The <span class="attribute">usemap</span> attribute on the <span class="element">input</span> element is obsolete.
Use the <span class="element">img</span> element instead of the <span class="element">input</span> element for image maps.
</span></li>
          <li><span>
The <span class="attribute">align</span> attribute on the <span class="element">input</span> element is obsolete.
<a href="http://wiki.whatwg.org/wiki/Presentational_elements_and_attributes">Use CSS instead</a>.
</span></li>
        </ul>
</div>
      <div class="no-number no-toc tag-omission" id="input.file-tags">
        <h2 class="element-subhead">Tag omission <a class="hash" href="#input.file-tags">#</a>
</h2>
        <p>The
            <span class="element">input</span>
            element is a <a href="syntax.html#void-element" id="void-element_xref40">void element</a>.
            An <span class="element">input</span>
            element must have a
            <span title="syntax-start-tag">start tag</span>
            but must not have an
            <span title="syntax-end-tag">end tag</span>.</p>
      </div>
      <div class="no-number no-toc" id="input.file-context">
        <h2 class="element-subhead">Permitted parent elements <a class="hash" href="#input.file-context">#</a>
</h2>
        <p class="permitted-parents"><span class="context-mdl"><span>any element that can contain
            <a href="common-models.html#common.elem.phrasing">phrasing elements</a></span></span></p>
      </div>
      <div class="no-number no-toc interface" id="input.file-interface">
        <h2 class="element-subhead">DOM interface <a class="hash" href="#input.file-interface">#</a>
</h2>
<pre class="idl">interface <b>HTMLInputElement</b> : <a href="http://dev.w3.org/html5/spec/elements.html#htmlelement" title="">HTMLElement</a> {
           attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-accept" title="dom-input-accept">accept</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-alt" title="dom-input-alt">alt</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-autocomplete" title="dom-input-autocomplete">autocomplete</a>;
           attribute boolean <a href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
           attribute boolean <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-defaultchecked" title="dom-input-defaultChecked">defaultChecked</a>;
           attribute boolean <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-checked" title="dom-input-checked">checked</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-dirname" title="dom-input-dirName">dirName</a>;
           attribute boolean <a href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#dom-fe-disabled" title="dom-fe-disabled">disabled</a>;
  readonly attribute <a href="http://dev.w3.org/html5/spec/the-form-element.html#htmlformelement" title="">HTMLFormElement</a>? <a href="http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#dom-fae-form" title="dom-fae-form">form</a>;
  readonly attribute <a href="http://dev.w3.org/html5/spec/infrastructure.html#filelist" title="">FileList</a>? <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-files" title="dom-input-files">files</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#dom-fs-formaction" title="dom-fs-formAction">formAction</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#dom-fs-formenctype" title="dom-fs-formEnctype">formEnctype</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#dom-fs-formmethod" title="dom-fs-formMethod">formMethod</a>;
           attribute boolean <a href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#dom-fs-formnovalidate" title="dom-fs-formNoValidate">formNoValidate</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#dom-fs-formtarget" title="dom-fs-formTarget">formTarget</a>;
           attribute unsigned long <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-height" title="dom-input-height">height</a>;
           attribute boolean <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-indeterminate" title="dom-input-indeterminate">indeterminate</a>;
  readonly attribute <a href="http://dev.w3.org/html5/spec/elements.html#htmlelement" title="">HTMLElement</a>? <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-list" title="dom-input-list">list</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-max" title="dom-input-max">max</a>;
           attribute long <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-maxlength" title="dom-input-maxLength">maxLength</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-min" title="dom-input-min">min</a>;
           attribute boolean <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-multiple" title="dom-input-multiple">multiple</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/attributes-common-to-form-controls.html#dom-fe-name" title="dom-fe-name">name</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-pattern" title="dom-input-pattern">pattern</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-placeholder" title="dom-input-placeholder">placeholder</a>;
           attribute boolean <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-readonly" title="dom-input-readOnly">readOnly</a>;
           attribute boolean <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-required" title="dom-input-required">required</a>;
           attribute unsigned long <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-size" title="dom-input-size">size</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-src" title="dom-input-src">src</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-step" title="dom-input-step">step</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-type" title="dom-input-type">type</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-defaultvalue" title="dom-input-defaultValue">defaultValue</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-value" title="dom-input-value">value</a>;
           attribute <span>Date</span>? <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-valueasdate" title="dom-input-valueAsDate">valueAsDate</a>;
           attribute double <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-valueasnumber" title="dom-input-valueAsNumber">valueAsNumber</a>;
           attribute unsigned long <a href="http://dev.w3.org/html5/spec/the-input-element.html#dom-input-width" title="dom-input-width">width</a>;

  void <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-stepup" title="dom-input-stepUp">stepUp</a>(optional long n);
  void <a href="http://dev.w3.org/html5/spec/common-input-element-apis.html#dom-input-stepdown" title="dom-input-stepDown">stepDown</a>(optional long n);

  readonly attribute boolean <a href="http://dev.w3.org/html5/spec/constraints.html#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
  readonly attribute <a href="http://dev.w3.org/html5/spec/constraints.html#validitystate" title="">ValidityState</a> <a href="http://dev.w3.org/html5/spec/constraints.html#dom-cva-validity" title="dom-cva-validity">validity</a>;
  readonly attribute DOMString <a href="http://dev.w3.org/html5/spec/constraints.html#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
  boolean <a href="http://dev.w3.org/html5/spec/constraints.html#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
  void <a href="http://dev.w3.org/html5/spec/constraints.html#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(DOMString error);

  readonly attribute <a href="http://dev.w3.org/html5/spec/infrastructure.html#nodelist" title="">NodeList</a> <a href="http://dev.w3.org/html5/spec/the-label-element.html#dom-lfe-labels" title="dom-lfe-labels">labels</a>;

  void <a href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-select" title="dom-textarea/input-select">select</a>();
           attribute unsigned long <a href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionstart" title="dom-textarea/input-selectionStart">selectionStart</a>;
           attribute unsigned long <a href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectionend" title="dom-textarea/input-selectionEnd">selectionEnd</a>;
           attribute DOMString <a href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-selectiondirection" title="dom-textarea/input-selectionDirection">selectionDirection</a>;
  void <a href="http://dev.w3.org/html5/spec/textFieldSelection.html#dom-textarea-input-setselectionrange" title="dom-textarea/input-setSelectionRange">setSelectionRange</a>(unsigned long start, unsigned long end, optional DOMString direction);
};</pre>
</div>
</div>
<hr class="footerbreak">
<div class="nav">
<span class="nav-prev"><a href="input.reset.html">&#171; input type=reset</a></span>
<span class="nav-next"><a href="input.hidden.html">input type=hidden &#187;</a></span>
</div>
<script src="js/jump-indexes.js" type="text/javascript"></script><script src="js/dfn.js" type="text/javascript"></script>
</body>
</html>
Something went wrong with that request. Please try again.