CODEWITHSUNDEEP
javascriptcanvas
Victorino
Victorino

Reputation: 1641

Display images inside canvas before upload them to server

i'm trying to display images inside canvas before upload them to the server. i don't have a lot of experience in html 5. who can show me any solution of this?? 

    <form action="#" method="POST" ecrtype="myltipart/form-data">

      <button type="buttom" class="file-uploader">      
         <input class="img-fields" type="file" name="files[]" multiple >
         <span>add files ...</span>
      </button>



         <input type="submit" name="upload" value="upload">

   </form>


       <canvas></canvas>

Upvotes: 2

Views: 481

Answers (1)

geevee
geevee

Reputation: 5451

with the following approach you can preview you'r image before it's being uploaded (100% client side).

here you go:

html:

<input type="file" id="fileInput" />
<div id="preview"></div>

javascript:

document.getElementById('fileInput').addEventListener('change', function(){
    var file = this.files[0];
    window.URL = window.URL || window.webkitURL;
    var blobURL = window.URL.createObjectURL(file);
    document.getElementById('preview').innerHTML = '<img src="' + blobURL + '" />';
});

hope that helps.

Upvotes: 2

Related Questions