Javascript 在将图像上载到服务器之前，在画布中显示图像

我试图在将图像上传到服务器之前在画布中显示它们。 我在HTML5方面没有很多经验。谁能告诉我这个问题的解决方法

    <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>

添加文件。。。

使用以下方法，您可以在上传图像之前预览图像（100%客户端）

给你：

html:

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 + '" />';
});

document.getElementById（'fileInput'）.addEventListener（'change'，function（）{
var file=this.files[0]；
window.URL=window.URL | | window.webkitURL；
var blobURL=window.URL.createObjectURL（文件）；
document.getElementById（'preview'）。innerHTML=''；
});

---

希望对您有所帮助。

您应该使用Ajax访问图像并预览它们。感谢您的指导他希望在上传图像之前在客户端预览图像。这不需要ajax，我正在尝试使用新的FileReader（）；它的工作非常完美

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 + '" />';
});