Convert image array to blob format and render with PHP

Question

I am tryins to convert an array of images in blob format and send to script php to process the data but the array of blobs is not sending correctly, i dont know why. My input in html is this:

<div class="form-group">
<input id="imagen" onchange="send()" type="file" name="imgs" multiple="true" class="form-control required" >
</div>

And my script in javascript is this:

<script>
    var y='#imagen';
    var z;        
    var blobs;
    function send(){
        x=trans(y); 
        };

    function trans(v) {
        var file    = document.querySelector(v).files;

        for (i = 0; i < file.length; i++) {
            var reader  = new FileReader();
            reader.readAsDataURL(file[i]);
            reader.onloadend = function () {
            blobs[i]=reader.result;
            }
        }
        console.log(blobs.length);

        }
</script>

I'm trying to send the array blob to script php throught ajax call:

var form = $('#for_addH')[0];
                var formData = new FormData(form);
                 formData.append("blobs",JSON.stringify(blobs));
                $.ajax({
                type: "POST",
                url: "phpfunc/posadas/nueva_habitacion.php",
                contentType:false,
                processData:false,
                cache:false,
                data: formData,
                timeout: 180000
            })

So, my problem is that the array is not sending correctly. help please.

score 0 · Answer 1 · answered Feb 12 '17 at 02:58

0

You are concatenating data URIs, not Blobs.

If requirement is actually to post a stringified array of concatenated data URIs, you can use an immediately invoked function expression. FileReader loadend event returns results asynchronously. You can pass i to an IIFE to retain i reference within for loop

function trans(v) {
    var file    = document.querySelector(v).files;

    for (i = 0; i < file.length; i++) {
      (function(curr) {
        var reader  = new FileReader();
        reader.readAsDataURL(file[curr]);
        reader.onloadend = function () {
          blobs[curr]=reader.result;
        }
      })(i);
    }
    console.log(blobs.length);

}

answered Feb 12 '17 at 02:58

guest271314

1
15
104
177

This is returned by your suggestion: Uncaught TypeError: Cannot read property 'length' of undefined Uncaught TypeError: Cannot set property '0' of undefined – Mvram Feb 12 '17 at 03:06
Where is `send()` called? Why do you pass `form` to `FormData()` then call `.append()`? Are you trying to send a concatenated string of multiple `data URI`s to server? – guest271314 Feb 12 '17 at 03:10
in the image, by the event onchange () – Mvram Feb 12 '17 at 03:11
Yes, where is `send` defined at `javascript`? Can you create a stacksnippets or jsfiddle http://jsfiddle.net to demonstrate? – guest271314 Feb 12 '17 at 03:12
`blobs` is `undefined`. Define `blobs` as an array `var blobs = []` https://jsfiddle.net/w0q80t2q/1/ – guest271314 Feb 12 '17 at 03:45
When `blobs.length` is equal to `file.length`, all files have been processed. It is not necessary to pass `form` to `FormData()` https://jsfiddle.net/w0q80t2q/2/ – guest271314 Feb 12 '17 at 03:59
yes, but i need save the blobs in my bd, so, it is passed trougth ajax to my scrip php. Still not works my script :( – Mvram Feb 12 '17 at 04:49
You are not passing `Blob` instances. You are passing `data URI`s. Can you include `php` at Question? Why do you not simply submit the `
` element? Though no `form` element appears at `javascript` at Question.
– guest271314 Feb 12 '17 at 05:16
I do not submit because I need to save in the bd the data URI s. – Mvram Feb 12 '17 at 13:07
@M.Doe What is "the bd"? Do you mean database? Instead of sending single string at one property of `FormData`, you can create a key for each `File` object converted to `data URI`. See also [Upload multiple image using AJAX, PHP and jQuery](http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/), http://stackoverflow.com/a/42037165/ – guest271314 Feb 12 '17 at 16:24

Convert image array to blob format and render with PHP

1 Answers1