Question

此问题已经过编辑，以反映我尝试使用blob和二进制字符串。

我正在阅读以下文档（https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects）并获得以下脚本：

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].files[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);
        });
    }
};

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

我希望我已经充分解释了。请指教。

Answer 1

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});

上传blob

Ajax上传文件在LocalStorage中设置的图像

1 个答案: