mozilla

Compare Revisions

Using files from web applications

Change Revisions

Revision 36125:

Revision 36125 by myakura on

Revision 36126:

Revision 36126 by marco.buratto 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 36125
Revision 36126
n440      Handling the upload process for a file, asynchronously (depn440      Handling the upload process for a file, asynchronously
>recated getAsBinary) 
n443function fileUpload(file) {n443<?php
444  // Please report improvements to: marco.buratto at tiscali.it444 
445  445if (isset($_GET['upload']))
446  var fileName = file.name,446    {
447    fileSize = file.size,447    // Use uploads as usual!
448    fileData = file.getAsBinary(), // works on TEXT data ONLY. us448    
>e new FileReader 
449    boundary = "xxxxxxxxx",449    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/".
 >$_FILES['myFile']['name']);
450    uri = "serverLogic.php",450    exit;
451    xhr = new XMLHttpRequest();
452  
453  xhr.open("POST", uri, true);
454  xhr.setRequestHeader("Content-Type", "multipart/form-data, boun
>dary="+boundary); // simulate a file MIME POST request. 
455  xhr.setRequestHeader("Content-Length", fileSize);
456  
457  xhr.onreadystatechange = function() {
458    if (xhr.readyState == 4) {
459      if ((xhr.status >= 200 && xhr.status <= 200) 
>|| xhr.status == 304) { 
460        
461        if (xhr.responseText != "") {
462          alert(xhr.responseText); // display response.
463        }
464      }
n466  }n452 
467  453// **************************************************************
 >********************************** ?>
454 
455<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 > "http://www.w3.org/TR/html4/loose.dtd">
456<html>
457<head>
458    <title>dnd binary upload</title>
459    <meta http-equiv="Content-Type" content="text/html; charse
 >t=UTF-8">
460    <meta name="Author" content="ing. Marco Buratto, ing.marco
 >buratto [at] gmail [dot] com">
461 
462    <script type="text/javascript">
463        function sendFile(fileData,fileName)
464            {
465            var boundary = "xxxxxxxxx";
466            var uri = "index.php?upload";
467 
468            if (XMLHttpRequest) xhr = new XMLHttpRequest();
469            else if (window.ActiveXObject) xhr = new ActiveXObjec
 >t("Microsoft.XMLHTTP");
470            else { throw new Error("XHR non disponibile."); retur
 >n false; }
471 
472            xhr.open("POST",uri,true);
473            xhr.setRequestHeader("Content-Type", "multipart/form-
 >data, boundary="+boundary); // simulate a file MIME POST request.
474 
475            xhr.onreadystatechange = function()
476                {
477                if (xhr.readyState==4)
478                    if ((xhr.status >= 200 && xhr.stat
 >us <= 200) || xhr.status == 304)
479                        {
480                        // Handle response.
481                        if (xhr.responseText!="")
482                            alert(xhr.responseText); // handle re
 >sponse.
483                        }
484                }
485                
468  var body = "--" + boundary + "\r\n";486            var body = "--" + boundary + "\r\n";
469  body += "Content-Disposition: form-data; name='fileId'; filenam487            body += "Content-Disposition: form-data; name='myFile
>e='" + fileName + "'\r\n";>'; filename='" + fileName + "'\r\n";  
470  body += "Content-Type: application/octet-stream\r\n\r\n";488            body += "Content-Type: application/octet-stream\r\n\r
 >\n";  
471  body += fileData + "\r\n";489            body += fileData + "\r\n";  
472  body += "--" + boundary + "--";490            body += "--" + boundary + "--";
473  491 
474  xhr.send(body);492            xhr.sendAsBinary(body);
475  return true;493            }
476}494 
495        function manageFile(myFile)
496            {
497            var fileReader = new FileReader();
498            fileReader.onload = function(read)
499                {
500                // readAsBinaryString():
501                // async methods with callback -> result here.
502 
503                sendFile(read.target.result, myFile.name);
504                }
505 
506            fileReader.readAsBinaryString(myFile);
507            }
508 
509 
510        window.onload = function()
511            {
512            document.getElementById("dropzone").ondragenter = fun
 >ction()
513                {
514                return false;
515                }
516    
517            document.getElementById("dropzone").ondragover = func
 >tion(event)
518                {
519                return false;
520                }
521    
522            document.getElementById("dropzone").ondrop = function
 >(event)
523                {
524                var filesArray = event.dataTransfer.files;
525                manageFile(filesArray[0]);
526 
527                return false;
528                }
529            }
530    </script>
531</head>
532 
533<body>
534    <div>
535        <div id="dropzone" style="margin:30px; width:500px; he
 >ight:300px; border:1px dotted grey;">Drag & drop your file
 > here...</div>
536    </div>
537</body>
538</html>
t479      <em>This needs to be modified for working with binary data,t541      <em>Updates <a class=" external" href="http://www.binaryemo
> too.</em>>tions.com/programmazione-web-xhr-per-file-binari/" title="http://
 >www.binaryemotions.com/programmazione-web-xhr-per-file-binari/">h
 >ere</a>.</em>

Back to History