javascript - 从 FileReader 获得的 JPEG 数据与文件中的数据不匹配

Question

我正在尝试通过 HTML5 FileReader 在 Web 浏览器中选择一个本地 JPEG 文件，这样我就可以将它提交到服务器而无需重新加载页面。所有的机制都在工作，我想我正在传输和保存 JavaScript 给我的确切数据，但结果是服务器上的 JPEG 文件无效。下面是演示问题的基本代码:

<form name="add_photos">
    ​<input type=​"file" name=​"photo" id=​"photo" /><br />
    ​<input type=​"button" value=​"Upload" onclick=​"upload_photo()​;​" />​
</form>

<script type="text/javascript">
    function upload_photo() {
        file = document.add_photos.photo.files[0];
        if (file) {
            fileReader = new FileReader();
            fileReader.onload = upload_photo_ready;
            fileReader.readAsBinaryString(file);
        }
    }

    function upload_photo_ready(event) {
        data = event.target.result;
        // alert(data);

        URL = "submit.php";
        ajax = new XMLHttpRequest();
        ajax.open("POST", URL, 1);
        ajax.setRequestHeader("Ajax-Request", "1");
        ajax.send(data);
    }
</script>

然后我的 PHP 脚本会这样做:

$data = file_get_contents("php://input");
$filename = "test.jpg";
file_put_contents($filename, $data);
$result = imagecreatefromjpeg($filename);

最后一行引发 PHP 错误“test.jpg 不是有效的 JPEG 文件”。如果我将数据下载回我的 Mac 并尝试在预览中打开它，预览会说文件“可能已损坏或使用了预览无法识别的文件格式。”

如果我用文本编辑器打开我桌面上的原始文件和服务器上上传的文件来检查它们的内容，它们几乎相同但不完全相同。原始文件是这样开始的:

ˇÿˇ‡JFIFˇ˛;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 90

但是上传的文件是这样开头的:

ÿØÿàJFIFÿþ;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 90

有趣的是，如果我在带有上面注释掉的行的 JavaScript 警报中查看数据，它看起来就像上传文件的数据，所以 FileReader 似乎一开始就没有提供正确的数据，而不是在服务器上传输或保存数据时引入的问题。谁能解释一下？

我使用的是 Safari 6，我也尝试过 Firefox 14。

更新:我刚刚发现如果我跳过 FileReader 代码并将 ajax.send(data) 更改为 ajax.send(file)，图像将被正确传输并保存在服务器上。所以我的问题基本解决了，但是我会把答案分给任何能解释为什么我原来的 readAsBinaryString 方法不起作用的人。

Answer 1

您的问题在于 readAsBinaryString。这会将二进制数据逐字节传输到字符串中，这样您就可以将文本字符串发送到 PHP 文件。现在文本字符串总是有一个编码；当您使用 XmlHttpRequest 上传字符串时，by default it will use UTF-8 .

因此，每个原本应该代表一个字节的字符将被编码为 UTF-8...它使用 多个字节 为每个代码点超过 127 的字符!

最好的办法是使用 readAsArrayBuffer而不是 readAsBinaryString。这将避免所有字符集转换(在 dealing with strings 时是必需的)。