是否可以通过jQuery单独使用用户选择的另一个图像替换图像？

我让用户选择一个图像，我想更改动态显示的图像，而不必依赖像PHP这样的服务器端脚本？

基本上，我有一个类似于以下内容的HTML：

然后在jQuery方面我有以下内容：

 $('#file').change(function(e){ alert($(this).val()); }); 

我希望用用户选择在本地引用的系统替换imagedisplay的src但$(this).val()只显示文件名，所以我将无法将其作为源引用。

Answer 1

您可以使用FileReader API。

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。

它的方法FileReader.readAsDataURL（）

readAsDataURL方法用于读取指定Blob或File的内容。

注意：它适用于现代浏览器

 $(document).ready(function() { $('#file').change(function(e) { var reader = new FileReader(); reader.onload = function(e) { $('#imagedisplay').attr('src', e.target.result); } reader.readAsDataURL(this.files[0]); }); });