Image upload preview using my JQuery Upload Plugin

Adding a simple image preview during the upload process can be easily done by doing some tweaking to my Upload Plugin demos.

Here is the modified demo:

The magic happens on onNewFile(id, file); our new file callback recives an HTML5 File object as parameter which can be used with the FileReader to accomplish our goal.

The code is very self explanatory:

onNewFile: function(id, file){

      // Checks if this feature if availabe to the user
      if (typeof FileReader !== "undefined"){
            
        var reader = new FileReader();

        // Our  object
        var img = $('your-image-dom-object');

        reader.onload = function (e) {
           img.attr('src', e.target.result);
        }

        reader.readAsDataURL(file);

      }
  }

Modern browsers like Chrome/Firefox or IE10 support this feature; which is enough since those are also my uploader plugin requirements.

About
Related Posts
Comments
The comments are closed on this section.
Hire me!

I'm currently open for new projects or join pretty much any project i may fit in, let me know!

Read about what I do, or contact me for details.

Categories