Compare Revisions

Using files from web applications

Change Revisions

Revision 36103:

Revision 36103 by ebidel on

Revision 36104:

Revision 36104 by butch566 on

Title:
Using files from web applications
Using files from web applications
Slug:
Using_files_from_web_applications
Using_files_from_web_applications
Tags:
Files, HTML5, MakeBrowserAgnostic, "ajax upload", upload
Files, HTML5, MakeBrowserAgnostic, "ajax upload", upload
Content:

Revision 36103
Revision 36104
n380      The <code>FileUpload()</code>&nbsp;function shown above cren380      The <code>FileUpload()</code>&nbsp;function shown above cre
>ates a throbber, which is used to display progress information, t>ates a throbber, which is used to display progress information, t
>hen creates an <a href="/en/XMLHttpRequest" title="en/XMLHttpRequ>hen creates an <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttp
>est"><code>XMLHttpRequest</code></a> to handle uploading the data>Request"><code>XMLHttpRequest</code></a> to handle uploading the 
>.>data.
n402    <pre class="brush: js">n402    <p>
403function fileUpload(file) {403      function fileUpload(file) {<br>
404  // Please report improvements to: marco.buratto at tiscali.it404      &nbsp; // Please report improvements to: marco.buratto at t
 >iscali.it<br>
405  405      &nbsp;<br>
406  var fileName = file.name,406      &nbsp; var fileName = file.name,<br>
407    fileSize = file.size,407      &nbsp;&nbsp;&nbsp;&nbsp;fileSize = file.size,<br>
408    fileData = file.getAsBinary(), // works on TEXT data ONLY.408      &nbsp;&nbsp;&nbsp; fileData = file.getAsBinary(), // works 
 >on TEXT data ONLY.<br>
409    boundary = "xxxxxxxxx",409      &nbsp;&nbsp;&nbsp; boundary = "xxxxxxxxx",<br>
410    uri = "serverLogic.php",410      &nbsp;&nbsp;&nbsp;&nbsp;uri = "serverLogic.php",<br>
411    xhr = new XMLHttpRequest();411      &nbsp;&nbsp;&nbsp;&nbsp;xhr = new XMLHttpRequest();<br>
412  412      &nbsp;<br>
413  xhr.open("POST", uri, true);413      &nbsp; xhr.open("POST", uri, true);<br>
414  xhr.setRequestHeader("Content-Type", "multipart/form-data, boun414      &nbsp; xhr.setRequestHeader("Content-Type", "multipart/form
>dary="+boundary); // simulate a file MIME POST request.>-data, boundary="+boundary); // simulate a file MIME POST request
 >.<br>
415  xhr.setRequestHeader("Content-Length", fileSize);415      &nbsp; xhr.setRequestHeader("Content-Length", fileSize);<br
 >>
416  416      &nbsp;<br>
417  xhr.onreadystatechange = function() {417      &nbsp; xhr.onreadystatechange = function() {<br>
418    if (xhr.readyState == 4) {418      &nbsp;&nbsp;&nbsp; if (xhr.readyState == 4) {<br>
419      if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt;= 200) 419      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if ((xhr.status &gt;= 200 &a
>|| xhr.status == 304) {>mp;&amp; xhr.status &lt;= 200) || xhr.status == 304) {<br>
420        420      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
421        if (xhr.responseText != "") {421      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (xhr.response
 >Text != "") {<br>
422          alert(xhr.responseText); // display response.422      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; aler
 >t(xhr.responseText); // display response.<br>
423        }423      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>
424      }424      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>
425    }425      &nbsp;&nbsp;&nbsp; }<br>
426  }426      &nbsp; }<br>
427  427      &nbsp;<br>
428  var body = "--" + boundary + "\r\n";428      &nbsp; var body = "--" + boundary + "\r\n";<br>
429  body += "Content-Disposition: form-data; name='fileId'; filenam429      &nbsp; body += "Content-Disposition: form-data; name='fileI
>e='" + fileName + "'\r\n";>d'; filename='" + fileName + "'\r\n";<br>
430  body += "Content-Type: application/octet-stream\r\n\r\n";430      &nbsp; body += "Content-Type: application/octet-stream\r\n\
 >r\n";<br>
431  body += fileData + "\r\n";431      &nbsp; body += fileData + "\r\n";<br>
432  body += "--" + boundary + "--";432      &nbsp; body += "--" + boundary + "--";<br>
433  433      &nbsp;<br>
434  xhr.send(body);434      &nbsp; xhr.send(body);<br>
435  return true;435      &nbsp; return true;<br>
436}436      }<br>
437</pre>437    </p>
438    <div style="float: right; border: 1px solid grey; padding: 5p
 >x; margin: 5px; background-color: rgb(250, 250, 250);">
439      <p>
440        <strong><a href="/Help:fr" title="Help:fr"><strong>Pages 
 >pour les éditeurs de MDC :</strong></a></strong>
441      </p>
442      <ul>
443        <li>
444          <a href="/Project:fr/Comment_aider" title="Project:fr/C
 >omment_aider">Comment aider</a>
445        </li>
446        <li>
447          <a href="/Project:fr/R%C3%A9f%C3%A9rence_des_balises_wi
 >ki" title="Project:fr/Référence_des_balises_wiki">Référence des b
 >alises wiki</a>
448        </li>
449        <li>
450          <a href="/Help:fr/R%C3%A8gles_et_conventions" title="He
 >lp:fr/Règles_et_conventions">Règles et conventions</a>
451          <ul>
452            <li>
453              <a href="/Project:fr/Classes_CSS_personnalis%C3%A9e
 >s" title="Project:fr/Classes_CSS_personnalisées">Classes CSS part
 >iculières</a>
454            </li>
455            <li>
456              <a href="/Project:fr/Mod%C3%A8les_personnalis%C3%A9
 >s" title="Project:fr/Modèles_personnalisés">Modèles personnalisés
 ></a>
457            </li>
458            <li>
459              <a href="/Project:fr/Extensions_MediaWiki" title="P
 >roject:fr/Extensions_MediaWiki">Extensions MediaWiki</a>
460            </li>
461            <li>
462              <a href="/Project:fr/Redirections_externes" title="
 >Project:fr/Redirections_externes">Redirections externes</a>
463            </li>
464          </ul>
465        </li>
466        <li>
467          <a href="/Project:fr/Pages_%C3%A0_supprimer" title="Pro
 >ject:fr/Pages_à_supprimer">Pages à supprimer</a>
468        </li>
469      </ul>{{ live.AerialMap{address: "110 seal st west monroe,la
 >."} }}
470    </div>
n455        <a href="/En/XMLHttpRequest/Using_XMLHttpRequest" title="n488        <a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" tit
>En/Using XMLHttpRequest">Using XMLHttpRequest</a>>le="En/Using XMLHttpRequest">Using XMLHttpRequest</a>
t461        <a href="/en/XMLHttpRequest" title="en/XMLHttpRequest"><ct494        <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest
>ode>XMLHttpRequest</code></a>>"><code>XMLHttpRequest</code></a>

Back to History