使用javascript從本地主機打開文件

Question

我試圖在我的網站上添加圖片上傳器。 我有一個使用jcrop的javascript（腳本不是我的，我使用了我在Internet上找到的那個）； 此腳本從計算機獲取圖像文件並將其傳遞給php。 首先將表單輸出轉換為javascrip文件。

var oFile = $('#image_file')[0].files[0];

這是腳本的關鍵所在，其他所有內容均來自oFile。 我想通過添加網絡鏈接使用戶能夠上傳圖片（我已經可以將圖像文件保存在本地主機上發布鏈接了）； 如何使用javascript從本地主機打開圖像並將其與上一行中的oFile變量設置為相同格式，以便我的腳本可以使用它？

Answer 1

您可以在現代瀏覽器中使用二進制Ajax將資源作為文件獲取：

var oReq = new XMLHttpRequest();
oReq.open("GET", fileURLGivenByUser, true);
oReq.responseType = "blob";

oReq.onload = function(oEvent) {
  var oFile = oReq.response;
  processTheFileSomehow(oFile);
};

oReq.send();

只要滿足以下任一條件，它將起作用：

• fileURLGivenByUser與運行腳本的頁面位於同一域（例如，您的裁剪腳本在foo.com運行，圖像鏈接也在foo.com ），或者

• 目標圖像資源與Access-Control-Allow-Origin: * CORS響應標頭（例如，您的裁剪腳本在foo.com運行，圖像鏈接在bar.com ， bar.com為文件提供可接受的CORS標頭）

因此，要使您的用戶使用localhost鏈接，該用戶必須正在運行本地Web服務器，並且該Web服務器必須使用Access-Control-Allow-Origin: *或Access-Control-Allow-Origin: whateverdomainyouuse.com您使用的localhost來提供其映像Access-Control-Allow-Origin: whateverdomainyouuse.com （即運行您的裁剪腳本的任何域）。

如果CORS限制過於嚴格（可能是），則可以在主機上使用服務器端代理 。 例如，當您要求

http://mydomain.com/proxy/http://targetdomain.com/image.png

服務器進行請求並使用以下內容進行響應

http://targetdomain.com/image.png