Skip to content

Instantly share code, notes, and snippets.

@jiangtao

jiangtao/handle_file_upload.php

Forked from ebidel/handle_file_upload.php
Last active August 29, 2015 14:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jiangtao/243c5a6961943bb977cf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jiangtao/243c5a6961943bb977cf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ebidel ebidel created this gist Apr 18, 2012.
    16 changes: 16 additions & 0 deletions handle_file_upload.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <?php
    $fileName = $_FILES['afile']['name'];
    $fileType = $_FILES['afile']['type'];
    $fileContent = file_get_contents($_FILES['afile']['tmp_name']);
    $dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);

    $json = json_encode(array(
    'name' => $fileName,
    'type' => $fileType,
    'dataUrl' => $dataUrl,
    'username' => $_REQUEST['username'],
    'accountnum' => $_REQUEST['accountnum']
    ));

    echo $json;
    ?>
    69 changes: 69 additions & 0 deletions xhr.send(FormData).html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    <!DOCTYPE html>
    <!--
    Copyright 2012 Google Inc.
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    Author: Eric Bidelman ([email protected])
    -->
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>xhr.send(FormData) Example</title>
    </head>
    <body>

    <input type="file" name="afile" id="afile" accept="image/*"/>

    <script>
    document.querySelector('#afile').addEventListener('change', function(e) {
    var file = this.files[0];

    var fd = new FormData();
    fd.append("afile", file);
    // These extra params aren't necessary but show that you can include other data.
    fd.append("username", "Groucho");
    fd.append("accountnum", 123456);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'handle_file_upload.php', true);

    xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
    var percentComplete = (e.loaded / e.total) * 100;
    console.log(percentComplete + '% uploaded');
    }
    };

    xhr.onload = function() {
    if (this.status == 200) {
    var resp = JSON.parse(this.response);

    console.log('Server got:', resp);

    var image = document.createElement('img');
    image.src = resp.dataUrl;
    document.body.appendChild(image);
    };
    };

    xhr.send(fd);
    }, false);
    </script>
    <!--[if IE]>
    <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
    <script>CFInstall.check({mode: 'overlay'});</script>
    <![endif]-->
    </body>
    </html>