如何在不上载的情况下显示预览图像？

Question

我想显示预览图像，而不会上传图像。最好如果我可以先裁剪图像，然后显示预览。做这个的最好方式是什么？我听说这可以用jQuery和Ajax完成。我的网站正在使用cakePHP。

Answer 1

的HTML代码：

<input type="file" id="files" /> 
<img id="image" /> 

的JavaScript代码：

document.getElementById("files").onchange = function() { 
    var reader = new FileReader(); 

    reader.onload = function (e) { 
     // get loaded data and render thumbnail. 
     document.getElementById("image").src = e.target.result; 
    }; 

    // read the image file as a data URL. 
    reader.readAsDataURL(this.files[0]); 
}; 

你可以参考更多Here