title: HTML5 Image upload with javascript and php
body: <p>I want to multi-upload images to a  database using <code>javascript</code> and <code>php</code> (html5), but I have problem with it, my code is just uploading one image, which is the latest photo selected and not all. How can fix this problem and what do I have to do?</p>
  
  <p>I use developer mozilla html5: <strong><a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications" rel="nofollow">Here</a></strong></p>
  
  <p>You can test my code by selecting multi images and clicking on button <code>Upload Image</code> to see the result. </p>
  
  <p><strong><a href="http://binboy.gigfa.com/imgup.html" rel="nofollow">DEMO FROM MY FULL CODDE</a></strong></p>
  
  <p>My js code:</p>
  
  <pre><code>function doClick() {
      var el = document.getElementById("fileElem");
      if (el) {
          el.click();
      }
  }
  
  function handleFiles(files) {
      var d = document.getElementById("fileList");
      if (!files.length) {
          d.innerHTML = "&lt;p&gt;No files selected!&lt;/p&gt;";
      } else {
          var list = document.createElement("ul");
          d.appendChild(list);
          for (var i = 0; i &lt; files.length; i++) {
              var li = document.createElement("li");
              list.appendChild(li);
  
              var img = document.createElement("img");
              img.src = window.URL.createObjectURL(files[i]);;
              img.height = 60;
              img.onload = function () {
                  window.URL.revokeObjectURL(this.src);
              }
              li.appendChild(img);
  
              var info = document.createElement("span");
              info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
              li.appendChild(info);
          }
      }
  }
  </code></pre>
  
  <p>My php code:</p>
  
  <pre><code>&lt;?php 
    foreach ($_FILES[ 'userfile'] as $key=&gt;$value{ 
        echo '&lt;pre&gt;';
        print_r($value);
    }
  ?&gt;
  </code></pre>
  
  <p>My html code:</p>
  
  <pre><code>&lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;file input click() demo&lt;/title&gt;
          &lt;script type="text/javascript" src="html5java.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  &lt;a href="javascript:doClick()"&gt;Select some files&lt;/a&gt;
  
          &lt;div id="fileList"&gt;&lt;/div&gt;
          &lt;form action="up.php" method="post" enctype="multipart/form-data"&gt;
              &lt;input type="file" name="userfile[]" id="fileElem" multiple accept="image/*"
              style="display:none" onchange="handleFiles(this.files)"&gt;
              &lt;input type="submit" value="Upload Images"&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>