has19 has19 - 6 days ago 6
Javascript Question

sending array of edited array of files(images) to php script

I have a form containing an input of type file that can accept multiple files(images) as shown below:

<input type="file" id="fileupload" name="fileupload[]" multiple />


Once a user selects an image or multiple images they are added dynamically to the website and also the user can remove one or all of them if he wants to.

Is there a way I can update which files are chosen from the input element to send to php script?

If not how can I send only images the user chooses? I mean I can put what the user chose in another array in JavaScript but how can I send them to php script?

Edited

In more details for example when the user chooses three image files there is JavaScript code i use that appends them into screen as images and the user is given the option to remove one or all of them by clicking on them. So my problem is if the user for example removed one of the images how can I send only the other two images into the php script?

I am not looking for complete code. I am just looking for a hint on how to accomplish it.

Answer

I've understood what you want.

Combine Ajax with formData to get that.

$(document).ready(function(){
    $("form#data").submit(function(){

        // create your filtred list of files from your file input
        var data = {};
        $.each($('#fileupload')[0].files, function(i, file) {

            // Keep only the files that the user has selected
            if ( i % 2 == 0){ // <--- CHANGE THIS
                data['file-'+i] = file;
            }
        });

        // create a FormData (to send files with AJAX)
        var formData = new FormData();
        for (var key in data) {
          formData.append(key, data[key]);
        }

        // send that formData
        php_script_url = "your_script.php"
        $.ajax({
            url: php_script_url,
            type: 'POST',
            data: formData,
            async: false,
            success: function (data) {
                console.log(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });

        return false;
    });
});

Don't forget to include jQuery before this script

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
Comments