how do i get any images in binary code using js?

Question

I want to make a multiple images upload system with prograss bar. I want to do with simaple code(using jquery or js). I want when user has upload his images on browser and i want to show on browser that images and with upload button he starts uploading image via ajax in his folder.

So questions

1.) Is it possible to show uploaded image (without any complicated code) ?

2.) Do i get a variable or array where uploaded images are stored as base64 code (data:/img:dfd5d/d54fs..... something like this) or encoded?

3.) How do i add progressBar ?

I didn't write any code yet because i dont know how to start. I am new in computer science.

But i find this code on this site

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

This is easy code and i understand but one thing is not clear what does mean this line var reader = new FileReader(); why use new and what is it ? Ty in advance and please dont explain complicate and i am not very good in english. So please try to explain in poor words if possible..

See http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery — guest271314, Nov 27 '15 at 16:39

Gumma Mocciaro · Answer 1 · 2015-11-27T16:39:37.150

Assuming that you have this field

<input type="file" onchange="showImage(this)"/>

you can create a script to take the binary data and show it

function showImage(input){
    var reader = new FileReader();

    // validating...
    var fileType = input.files[0].type;
    var filesize = input.files[0].size;

    // filetype (this will validate mimetype, only png, jpeg, jpg allowed)
    var fileTypes = ["image/png", "image/jpeg", "image/gif"];
    if (fileTypes.indexOf(fileType) < 0){
        // return error, invalid mimetype
        return false;
    }

    // file cannot be more than 500kb
    if (filesize > 5000000) {
        // return error, image too big
        return false;
    }

    reader.onload = function (e) {
        // e will contain the image info
        jQuery('#myimagetopreview').attr('src', e.target.result)
    }

    reader.readAsDataURL(input.files[0]);
}

This should work, if you have problem tell me

edit: FileReader is not supported by all the browsers, check the documentation for more https://developer.mozilla.org/en/docs/Web/API/FileReader

so how can i make mulitple images uploading system with progress bar. — Phoenix, Nov 27 '15 at 16:43

score -1 · Answer 2 · answered Nov 27 '15 at 16:36

-1

The FileReader in JS has Status "Working Draft" and isn't part of the official JS API. I think you have to wait until the Browsers support this ne API or you have to activate experimental JS API in the Browser.

answered Nov 27 '15 at 16:36

Dominik Pfefferle

36
2

i asked how can is possible make and mulitple image uploading system with progress bar – Phoenix Nov 27 '15 at 16:41

how do i get any images in binary code using js?

2 Answers2