Jquery Ajax在本地存储中设置文件的位置上载图像

这个问题经过编辑以反映我试图使用blob和二进制字符串的尝试

我正在阅读以下文档（）并使用以下脚本：

var formData = new FormData();

formData.append("nationname", "my_nation");
formData.append("localid", "Ql5SvPgB2Aq9w");

// HTML file input user's choice...
formData.append("file", $("input[name='file']")[0].files[0]);

var request = new XMLHttpRequest();
request.open("POST", "/cgi-bin/upload.cgi");
request.send(formData);

因此，上述方法再次奏效。我可以使用这个脚本通过ajax上传我的图像。我的问题是，我希望能够从这个域下的任何页面上传一个标志（我正在为一个交互式浏览器游戏构建一个Chrome扩展），因此我不能对文件对象一直使用

$（[input[name='file']]）[0]。文件[0]

，因为表单不会在我面前，我不会与表单交互，我会在另一页上。我想使用localStorage存储文件对象，然后从localStorage调用它，将其附加到表单中，然后发送ajax请求

我使用以下代码在localStorage中设置它：

 $("input[value='Set Puppet']").click(function (event) {
    event.preventDefault();
    var toRemove = $(this);
    var binary = $("input[type='file']")[0].files[0];
    var reader = new FileReader();
    var caata = "";
    reader.onloadend = function () {
        caata = reader.result;
        var puppet = {
            email: $("input[id='puppet_email']").val(),
            password: $("input[id='password']").val(),
            flag: caata
        };
        localStorage.setItem("puppet", JSON.stringify(puppet));
        toRemove.parent().remove();
        $("#setSuccess").text("Puppet Set, Hit The P Key To Create Your Puppets!");
    }
    var daata = reader.readAsBinaryString(binary);
    });

所以说得清楚一点，那只叫一次。用于设置包含文件对象的localStorage

puppet.flag

。但当我这么做的时候：

var uploadFlag = function () {
    if (puppet.flag.length > 0) {
        var pattern = /"flag":"(.[A-Z]\w+)/g;
        var filetype = pattern.exec(localStorage.puppet);
        filetypes = "image/" + filetype[1].toLowerCase();
        console.log(filetypes);

        function BinarytoBlob(binary) {
            binarydata = new Uint8Array(binary.length);
            for (var x = 0; x < binary.length; x++) {
                binarydata[x] = binary.charCodeAt(x);
            }
            return new Blob([binarydata], {
                type: filetypes
            });
        }
        var blob = BinarytoBlob(puppet.flag);
        console.log(blob);
        $.get("http://www.nationstates.net/page=upload_flag", function (data) {
            var flagForm = new FormData();
            flagForm.append("nationname", name.toLowerCase());
            flagForm.append("localid", $(data).find("input[name='localid']").val());
            flagForm.append("file", blob);
            var flagUpload = new XMLHttpRequest();
            flagUpload.open("POST", "/cgi-bin/upload.cgi");
            flagUpload.send(flagForm);
        });
    }
};

var uploadFlag=函数（）{
如果（puppet.flag.length>0）{
变量模式=/“标志”：“（[A-Z]\w+）/g；
var filetype=pattern.exec（localStorage.puppet）；
filetypes=“image/”+filetype[1].toLowerCase（）；
log（文件类型）；
函数BinarytoBlob（二进制）{
binarydata=新的Uint8Array（binary.length）；
对于（var x=0；x

它不起作用。我看到ajax请求转到/cgi-bin/upload.cgi，但发生了一些错误，因为我从成功页面被重定向，它告诉我该文件不是有效的图像文件，即使我选择了一个PNG并看到它是二进制字符串中的PNG

---

我希望我已经做了充分的解释。请告知。

JavaScript中的字符串不是“二进制”“，从不能存储任何任意数据的意义上说，

readAsBinaryString

实际上并不是您所认为的那样。由于localstorage只保存字符串，因此必须将文件转换为字符串，然后在需要发送时将其转换回。你可以做到这一点

• 使用

  readAsBinaryString

• 从字符串到二进制数组的转换

  binarydata = new Uint8Array(stringdata.length);
  for (var x = 0; x < byteArray.length; x++){
      binarydata[x] = stringdata.charCodeAt(x);
  }
  var blob = new Blob([binarydata ], {type: what_ever_type_this_file_was});
  

  binarydata=newuint8array（stringdata.length）；
  对于（变量x=0；x

• 上传blob

---

无法将文件对象序列化为字符串，因此无法将其存储在LocalStorages中。您可以将其转换为数据urithough@Musa我会调查一下的，谢谢。@Musa显然这个网站不支持数据URI，所以我尝试将其作为二进制字符串，但也不起作用！：（我仍然从正在上载到的服务器收到错误消息。“不是有效的图像文件”@LSD注意，

BinarytoBlob

没有返回任何东西。我将更新我的代码，向您展示我现在拥有的东西，它确实返回了一些东西。您在哪里调用

uploadFlag

，您在哪里从本地存储检索数据？我使用键绑定调用它，在按键上调用它。我知道它正在被调用。