PHP Classes
elePHPant
Icontem

File: index.php

Recommend this page to a friend!
  Classes of manudg  >  PHP Upload Multiple Images Ajax  >  index.php  >  Download  
File: index.php
Role: Auxiliary script
Content type: text/plain
Description: Example script
Class: PHP Upload Multiple Images Ajax
Process uploaded images sent via AJAX requests
Author: By
Last change: Version 2.0.1
Date: 4 years ago
Size: 4,509 bytes
 

 

Contents

Class file image Download
<!-- Copyright 2015 Upload Multiple Images Ajax (email : manudg_1@msn.com)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<link href='http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet'/>
<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<!-- jQuery Plugin - upload multiple images ajax -->
<script src='js/uploadImages.js'></script>
<script>
$(function(){

/* Check File API compatibility */
if (!$.fileReader()){
    alert("File API is not supported on your browser");
}
else{
    console.log("File API is supported on your browser");
}

/* createImage Event */
$(document).on("createImage", function(e){
    console.log(e.file.name);
    console.log(e.file.size);
    console.log(e.file.type);
});

/* deleteImage Event */
$(document).on("deleteImage", function(e){
    console.log(e.file.name);
    console.log(e.file.size);
    console.log(e.file.type);
    /* if not there are images, the button is disabled */
    if ($("#upload-preview").countImages() == 0)
    {
        $("#btn").attr("disabled", "disabled");
    }
});
   
/* Prevent form submit */
$("#form").on("submit", function(e){
    e.preventDefault();
});
   
/* Preview and Validate */
$("#form input[type='file']").on("change", function(){
   
    $("#upload-preview").uploadImagesPreview("#form",
    {
        image_type: "jpg|jpeg|png|gif",
        min_size: 24,
        max_size: (1024*1024*3), /* 3 Mb */
        max_files: 10
    }, function(){
        switch(__errors__upload__) /* Check the possibles erros */
        {
            case 'ERROR_CONTENT_TYPE': alert("Error content type"); break;
            case 'ERROR_MIN_SIZE': alert("Error min size"); break;
            case 'ERROR_MAX_SIZE': alert("Error max size"); break;
            case 'ERROR_MAX_FILES': alert("Error max files"); break;
            default: $("#btn").removeAttr("disabled"); break; /* Activate the button Form */
        }
    });
});

/* Send form */
$("#btn").on("click", function(){
   
    /*images are required */
    if ($("#upload-preview").countImages() > 0)
    {
        $("#upload-preview").uploadImagesAjax("ajax.php", {
            params: {project_name: $("#project_name").val()}, /* Set the extra parameters here */
            beforeSend: function(){console.log("Sending ...");},
            success: function(data){$("#upload-preview").html(data); $("#form").fadeOut();},
            error: function(e){console.log(e.status);console.log(e.statusText);},
            complete: function(){console.log("Completed");}
        });
    }
    else{ // The button is not activated
        $(this).attr("disabled", "disabled");
    }
});
});
</script>

<style>
.img-responsive{
    max-width: 150px;
}
</style>

</head>
<body>
    <div class="container" style="padding-top: 50px;">
        <h3>Upload Multiple Images Ajax - <small>(PHP + jQuery + Bootstrap) <a href="docs.html">*|__documentation__|*</a></small></h3>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
        <input type="hidden" name="cmd" value="_s-xclick" />
        <input type="hidden" name="hosted_button_id" value="3MU32JJKR2YW6" />
        <button type="submit" class="btn btn-primary">DONATE <span class="glyphicon glyphicon-thumbs-up"></span></button>
        </form>

        <hr />
        <form method="post" id="form" class="form-inline" enctype="multipart/form-data">
                <div class="form-group">
                    <input type="file" multiple class="btn btn-primary" />
                </div>
                <div class="form-group">
                <label for="project_name">Project Name:</label>
                    <input type="text" class="form-control" id="project_name" />
                </div>
                <div class="form-group">
                    <button type="button" id="btn" class="btn btn-primary" disabled><span class="glyphicon glyphicon-save"></span></button>
                </div>
                <div class="form-group">
                    Images: <span class="badge count-images">0</span>
                </div>
        </form>
        <hr />
        <!-- Show the images preview here -->
        <div id="upload-preview"></div>
    </div>
</body>
</html>