Fiddle

Question

如果我只有本地文件的路径，是否可以创建HTML图像？我试图使用文件阅读器，但仅仅是路径不起作用。我该如何解决这个问题？

JS

var reader = new FileReader();
reader.onload = {
     $('#myImg').attr('src', e.target.result);
};
   reader.readAsDataURL("file:///C:/Users/me/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg  ");

Answer 1

这是我用JavaScript阅读文件的简单工具：

Fiddle

JavaScript代码是：

var reader = new FileReader();
reader.onerror = function(ev) {
    $('#output').html('=== Error reading file ===');
}
reader.onload = function(ev) {
    $('#output').html(ev.target.result);
};
reader.readAsDataURL(e.target.files[0]);

当您选择图像文件时，它将显示图像的base64 dataURI。

我建议不要尝试选择不是图像的文件，我不知道会发生什么。

Answer 2

这样的事情？

var x=document.createElement("img");
x.src="C:\data\images\test.jpg";
x.style.height="50px";
document.getElementById('whereimgoing').appendChild(x);

另外我应该补充一点，如果这是在网站上，那么它将在很大程度上取决于浏览器的安全性

Answer 3

var reader = new FileReader();
reader.onload = function(e) {
 $('#myImg').attr('src', reader.result);
};
reader.readAsDataURL("file:///C:/Your/path/msohtmlclip1/01/clip_image002.jpg");

如果授予对本地文件的访问权限，则应该没问题（检查浏览器设置或尝试在服务器（localhost或www.yourserver.com）上部署时是否有效。本地文件总是会导致浏览器出现问题表现不同。也尝试不使用临时文件夹。

HTML5 - 从本地路径动态创建图像？

3 个答案:

Fiddle