upload.html

  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload</title>
</head>
<body>

<form id="myForm">
    <label>File
        <input name="fileupload" id="fileupload" type="file"></label>
</form>

<button id="submit">Submit</button>

<div id="progress"></div>

<pre id="display"></pre>

<script src="../js/jquery.min.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>

<script>
    var fileUpload = new QfqNS.FileUpload('#myForm', 'api/uploadhandler.php', 'the_sip');
    fileUpload.on('fileupload.started', function () {
        $('#progress').empty().append('<p>Upload started</p>');
    });

    fileUpload.on('fileupload.ended', function () {
        $('#progress').append('<p>Upload finished</p>');
    });

    fileUpload.on('fileupload.upload.successful', function (obj) {
        $('#progress').append('<p>Upload success</p>');
        $('#display').empty().append(obj.data.file_content);
    });

    fileUpload.on('fileupload.upload.failed', function () {
        $('#progress').append('<p>Upload made a booboo</p>');
    });

    $('#submit').click(function () {
        $.post('upload.html', $('#myForm').serialize());
    });


</script>
</body>
</html>