从url或文件系统读取文件到javascript中的变量

Question

我正在尝试从计算机上的文件中读取文件并存储在变量中。 我目前正在尝试：

var fr = new FileReader;

fr.onload = function() {

    //variable to hold file
    var data = fr.result;

    var c=document.getElementById("cvs");
    var ctx=c.getContext("2d");
    ctx.drawImage(img,0,0,200,180);
};

fr.readAsDataURL("encryptedImage");

这行不通。 我需要这样做，才能解密文件系统上的加密图像。 我已经放弃了安全性，因此可以从浏览器读取我的文件系统。

有任何想法吗？

Answer 1

从这里看来，您想要通过将String传递给readAsArrayBuffer（）来加载本地文件，但是它可以检测到Blob或文件对象。 可以通过浏览器文件对话框加载该文件。 步骤是：选择文件，通过fileReader asArrayBuffer或asDataURL或asBinaryString ...加载文件，然后操作或使用代码中的数据。

对于此示例，它从本地文件创建一个Image并将其绘制到画布上（如果它是正确的MIME类型，则为“ image。*”）。

我不确定您要应用哪种编码/解码。 但是对于自定义的数据处理，我建议使用ArrayBuffers和TypeArrays。

FileReader.readAsDataURL（）的示例： http : //jsfiddle.net/uvmD7/

<body>
  <canvas id="cvs" width="200" height="200"></canvas>
  <input type="file" id="files" name="files[]" multiple />
</body>

和脚本：

document.getElementById('files').addEventListener('change', handleFileSelect, false);

var fr = new FileReader();

function handleFileSelect(evt) {
    var files = evt.target.files;
    fr.readAsDataURL(files[0]);
};

fr.onload = function(evt) {
    // do sth with it
    var data = evt.target.result; //fr.result 
    img = new Image();
    img.src = data; 
    //  draw after load
    img.onload = function() {
       var c=document.getElementById("cvs");
       var ctx=c.getContext("2d");
       ctx.drawImage(img,0,0,200,180);      
    };
};

从url或文件系统读取文件到javascript中的变量

问题描述

1 个解决方案

解决方案1
0 2013-01-16 19:52:25

从url或文件系统读取文件到javascript中的变量

问题描述

1 个解决方案

解决方案1 0 2013-01-16 19:52:25

解决方案1
0 2013-01-16 19:52:25