JPG（二进制数据）下载为 AJAX 响应

Question

我有一个页面，用户可以下载他要求的格式的图像，请求被发送到生成图像的 PHP 脚本......我想为用户提供服务。 这是来自 StackOverflow 的 JQUERY 代码

                    $('[name ="download_img_ajax"]').click(function(e){
                        e.preventDefault()
                        var element = this
                        var formdata = new FormData(element.closest(".form_downIMG"))
                        formdata.append('download_img_ajax','true')
                        $(this).next("span.down_response").html('Preparazione file in corso...'),
                        $('.emailadr').hide(),
                          $.ajax({
                               type: 'POST',
                               url: '$target_post',
                               data:  formdata,
                               cache: false,
                               contentType: false,
                               processData: false,
                            success: function(tornato) {
                              const blob = new Blob([tornato], {type: 'image/jpeg'});
                              const downloadUrl = URL.createObjectURL(blob);
                              const a = document.createElement("a");
                              a.href = downloadUrl;
                              a.download = "file.jpg";
                              document.body.appendChild(a);
                              a.click();
                              },
                        })
                      })

PHP 脚本将文件生成为 tmp 文件 ($img)，但我不明白如何将其作为正确的 AJAX 响应返回。

echo fread($img,filesize($img_path));

即使大小正确，也无法正常工作（文件未被识别为 JPG 文件）。

在正常形式中，我以这种方式返回文件：

      header('Content-Transfer-Encoding: binary');  // For Gecko browsers mainly
      header('Accept-Ranges: bytes');  // For download resume
      header('Content-Length: ' . filesize($img_path));  // File size
      header('Content-Encoding: none');
      header('Content-Type: image/jpeg');  // Change this mime type if the file is not PDF
      header('Content-Disposition: attachment; filename=' . $imgID);  // Make the browser display the Save As dialog
      readfile($img_path);
    fclose($img);

PS：在 JQ 中，我使用 next、closest 等，因为我有许多由 PHP 动态生成的表单。

我将只对大约 700KB 的文件使用这种下载，将较大的文件留在旧的提交表单方法中，目标 =“_blank” 和 PHP 中的 readfile。安全吗？

如果我还想管理错误（例如 PHP 脚本无法提供文件）我该如何处理？

谢谢。

Answer 1

使用 FileSaver.js (https://github.com/eligrey/FileSaver.js) 解决

                        var xhr = new XMLHttpRequest()
                            xhr.open('POST', '$target_post')
                            xhr.responseType = 'blob'
                            xhr.onload = function() {
                              saveAs(xhr.response, 'immagine.jpg');
                            }
                            xhr.send(formdata)

PHP echo fread($img,filesize($img_path));