title: Html5's File API - BLOB usages?
body: <p>I have a file input  :  <a href="http://jsbin.com/atICecog/4/edit" rel="nofollow noreferrer">(<strong>jsbin</strong>)</a></p>
  <pre><code> &lt;input type=&quot;file&quot;   accept=&quot;image/*&quot; id=&quot;input&quot; multiple   onchange='handleFiles(this)' /&gt;
  </code></pre>
  <p>Which, when file selected, shows small images of the selected image:</p>
  <p>I can do it in <strong>two ways</strong> :</p>
  <p><strong>using FileReader:</strong></p>
  <pre><code>function handleFiles(t) //t=this
  {
      var fileList = t.files;
      for (var i = 0; i &lt; fileList.length; i++)
      {
          var file = fileList[i];
          var img = document.createElement(&quot;img&quot;);
          img.style... = ...
          document.getElementById('body').appendChild(img);
          var reader = new FileReader();
          reader.onload = (function (aImg)
          {
              return function (e)
              {
                  aImg.src = e.target.result;
              };
          })(img);
          reader.readAsDataURL(file);
      }
      // ...
  }
  </code></pre>
  <p><strong>using ObjectURL / BLOB :</strong></p>
  <pre><code> function handleFiles(t)
   {
       var fileList = t.files;
       for (var i = 0; i &lt; fileList.length; i++)
       {
           var file = fileList[i];
           var img = document.createElement(&quot;img&quot;);
           img.src = window.URL.createObjectURL(file);
           img.onload = function (e)
           {
               window.URL.revokeObjectURL(this.src);
           }
           document.getElementById('body').appendChild(img);
       }
   }
  </code></pre>
  <p>As you can see , both work :</p>
  <p><img src="https://i.stack.imgur.com/b0WIJ.png" alt="enter image description here" /></p>
  <p><strong>BUT</strong></p>
  <p>The html result is different :</p>
  <p><img src="https://i.stack.imgur.com/MqeiG.png" alt="enter image description here" /></p>
  <p><strong>Question :</strong></p>
  <p>With the first one, I already know what I can do, it's pure <code>data-uri</code> data.</p>
  <p>But when should I use the second approach (blob)?
  I mean -  what can I do <code>blob:http%3A//run.jsbin.com/82b29cc5-8452-4ae2-80ca-a949898f4295</code> ?</p>
  <p>p.s.
  <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL#Browser_compatibility" rel="nofollow noreferrer">mdn</a> explanation about <code>URL.createObjectURL</code> doesn't help me about when should I use each.</p>