Using blueimp jQuery File Upload

Question

I am trying to implement the blueimp jQuery file uploader by trying to insert the chosen files into a MySQL database through PHP.

I am working with the Basic Plus UI one which you can find here

Here is the form:

<form id="fileupload" action="" method="POST" enctype="multipart/form-data">
        <!-- Redirect browsers with JavaScript disabled to the origin page -->
        <noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="col-lg-7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel upload</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" class="toggle">
                <!-- The global file processing state -->
                <span class="fileupload-process"></span>
            </div>
            <!-- The global progress state -->
            <div class="col-lg-5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>
                <!-- The extended global progress state -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
    </form>

I want to send the form to a page called process.php which processes all the data and uploads the files to a DB table.

I am confused with all the jQuery stuff as it seems the form gets sent to that.

Can you help me with understanding how to send the chosen files to a db through a PHP page that processes it.

I can deal with all the processing I just need to know how to send the form to a PHP page which gets all the chosen files through $_FILES[files] .

I have tried setting the action="process.php" but that doesn't do anything when I click the submit button.

Answer 1

You have to specify the location to the upload handler; on the fileupload init code.

HTML

<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Add files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
    <div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>

JS

$('#fileupload').fileupload({
    url: 'server/index.php',
    dataType: 'json',
    autoUpload: false,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 5000000, // 5 MB
    // Enable image resizing, except for Android and Opera,
    // which actually support image resizing, but fail to
    // send Blob objects via XHR requests:
    disableImageResize: /Android(?!.*Chrome)|Opera/
        .test(window.navigator.userAgent),
    previewMaxWidth: 100,
    previewMaxHeight: 100,
    previewCrop: true

    // rest of the code snipped

PS don't write your own upload handler. Look at their example and see how it's implemented.

Take a look at these:

• https://github.com/blueimp/jQuery-File-Upload/blob/master/basic-plus.html
• https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/index.php
• https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php

Answer 2

@user3574492: Dude. I'm trying to implement the same solution in asp.net environment. and guess what? I'm using a Handler to upload my files and it's not working (Not calling my handler), Unless I rename the Form ID to something except than "fileupload", Which is making upload button call my Handler and files will upload. the only problem which is happening after renaming form ID is that you are not able to see a preview to the files in queue you chose for upload anymore (Let's say the Gridview which is showing your upload queue)... and I think there should be a conflict here with the form ID which is "fileupload".