如何从 sdcard 读取图像文件并将其获取到 phonegap 中 img 标签的 src？答案

【问题标题】：How to read an image file from sdcard and get it to the src of a img tag in phonegap?如何从 sdcard 读取图像文件并将其获取到 phonegap 中 img 标签的 src？
【发布时间】：2014-01-06 10:27:34
【问题描述】：

我正在尝试从 sdcard 中读取不是由手机摄像头拍摄的图像，并让图像 src 显示在我的应用程序上。我为此尝试了许多解决方案并获得了许多更新。但它仍然无法正常工作。这是我的代码：

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess);
}
function onFileSystemSuccess(fileSystem){
    fileSystem.root.getFile("test.jpg", {create: false, exclusive: false}, fileSuccess);
}

function fileSuccess(fileEntry){
    fileEntry.file(gotfile);
}

function gotFile(file){
    readDataUrl(file);  
}

function readDataUrl(file){
    var reader = new FileReader();
    reader.onlaodend=function(evt){
        console.log(evt.target.result); 
        document.getElementById("img_test").src=evt.target.result;
    };
    reader.readAsDataURL(file);
}

我正在尝试获取这个 img 的 src：

<div>
    <img id="img_test" src="">
</div>

文件路径有什么问题吗？我是phonegap的新手。请让我知道我在这里做错了什么。谢谢...:)

【问题讨论】：

标签： javascript cordova

【解决方案1】：

这是一个可以帮助您的工作示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Pick Photo</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    document.addEventListener("deviceready",onDeviceReady,false);

    function onDeviceReady() {
       window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, onFail);
    }

     function onFail(message) {
      alert('Failed because: ' + message);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("1.jpg", {create: true}, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.file(gotFile, fail);
    }

    function gotFile(file){
        readDataUrl(file);  
    }

    function readDataUrl(file) {
           var reader = new FileReader();
           reader.onloadend = function(evt) {
           console.log("Read as data URL");
           console.log(evt.target.result);
           document.getElementById("smallImage").style.display='block'; 
           document.getElementById("smallImage").src = evt.target.result;   
        }; 
        reader.readAsDataURL(file);
    }

    function fail(evt) {
        console.log(evt.target.error.code);
    }
    </script>
  </head>
  <body>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

这将允许您从 sdcard 中选择任何指定的图像。

【讨论】：

我以前看过这段代码，主要是在处理它。但它仍然无法正常工作。如果您再次查看我的代码，您会发现我的代码与此非常相似。你能告诉我我在哪里做错了吗？感谢您的回复..:)
这段代码对我来说很好用。您在控制台中遇到什么错误？你能告诉..