html5 upload Image

fand ich

http://www.html5rocks.com/en/tutorials/file/dndfiles/

eher hilfreich.

wenn Sie nicht möchten, schieben Sie das Bild, um einige server ( ich nehme an, dies aus Ihrer Frage ), können Sie einfach aktualisieren Sie das Bild lokal :

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
    }
 </style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; //FileList object

   //Loop through the FileList and render image files as thumbnails.
   for (var i = 0, f; f = files[i]; i++) {

     //Only process image files.
     if (!f.type.match('image.*')) {
       continue;
     }

     var reader = new FileReader();

     //Closure to capture the file information.
     reader.onload = (function(theFile) {
       return function(e) {
          //Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
    };
      })(f);

      //Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

 </script>

oder somesuch.