Ajax multiple file upload and return json array in div ID#

Ajax multiple file upload and return json array in div ID#

I have the following jQuery and I'm wondering what is the best way to upload multiple pictures and once uploaded show them all in the (#addproduct_image_small) div? I would greatly appreciate anyones help on this. I can get one to upload correctly, but not multiples. I have tried everything but I can't get any output/response from json on my upload_additionalimages.php file.


  1. $(document).ready(function() {
    var options2 = {
            beforeSubmit:  showRequestadd, 
            success:       showResponseadd,
            url:       'includes/upload_additionalimages.php',
            dataType:  'json'
        };
        $('#addimages').submit(function() {
            $('#photomessage').html('');
            $(this).ajaxSubmit(options2);
            return false;
        });










  2. });   
  3. function showRequestadd(formData, jqForm, options2) {
        var fileToUploadValue = $('#fileToUpload').fieldValue();
        if (!fileToUploadValue[0]) {
            $('#photomessage').show();
            $('#photomessage').html('Please select a file.');
            return false;
        }
        return true;
    }








  4. function showResponseadd(data, statusText)  {
        $('#photomessage').show();
        if (statusText == 'success') {
            var msg = data.error.replace("##", "<br />");
            if (data.img != '') {
                $('#addproduct_image_small').html('<img src="http://www.<?php echo $siteextension.$sitefolder; ?>/t_images/image/' + data.img + '" />');
                $('#photomessage').html('<form id="imgdelete" method="post" action=""><input type="Submit" onClick="deleteimg(\'' + data.img + '\')" value="Change Image" /></form>');
                /*$('#formcont').html('');*/
            } else {
                $('#photomessage').html(msg);
            }
        } else {
            $('#photomessage').html('Unknown error!');
        }
    }














Here is the html form im using
  1.  <form id="addimages" method="post" action="" enctype="multipart/form-data">
                        <input type="hidden" name="MAX_FILE_SIZE" value="262144" />
                        <div id="addproduct_image_small"></div>
                           <div>Select an image(s) from your hard disk:</div>
                        <div>
                            <input type="file" name="fileToUpload" id="fileToUpload" size="18" />
                            <input type="Submit" value="Submit" id="Submit" />
                        </div>
                    </form>
                    <div id="photoresult"></div>
                    <p id="photomessage" class="error"></p>









Here is the upload_additionalimages.php
  1. <?php
    require_once('../../connections/mydatabase.php');
    require('../../includes/siteinfo.php');
    include('product_additionalimgs_upload_script.php');

    $foto_upload = new Foto_upload;   

    $json['size'] = $_POST['MAX_FILE_SIZE'];
    $json['img'] = '';

    $foto_upload->upload_dir = $_SERVER['DOCUMENT_ROOT'].$sitefolder."/d_images/";
    $foto_upload->foto_folder = $_SERVER['DOCUMENT_ROOT'].$sitefolder."/d_images/image/";
    $foto_upload->thumb_folder = $_SERVER['DOCUMENT_ROOT'].$sitefolder."/t_images/image/";
    $foto_upload->extensions = array(".jpg", ".gif", ".png");
    $foto_upload->language = "en";
    $foto_upload->x_max_size = 330;
    $foto_upload->y_max_size = 404;
    $foto_upload->x_max_thumb_size = 110;
    $foto_upload->y_max_thumb_size = 88;

    $foto_upload->the_temp_file = $_FILES['fileToUpload']['tmp_name'];
    $foto_upload->the_file = $_FILES['fileToUpload']['name'];
    $foto_upload->http_error = $_FILES['fileToUpload']['error'];
    $foto_upload->rename_file = true;

    if ($foto_upload->upload()) {
        $foto_upload->process_image(false, true, true, 80);
        $json['img'] = $foto_upload->file_copy;
    }

    $json['error'] = strip_tags($foto_upload->show_error_string());
    echo json_encode($json);
    ?>