保存靜態圖像與上傳圖像相同

Question

我正在開發一組JavaScript工具，我在保存靜態圖像時遇到了麻煩。首先，我創建了上傳器來上傳圖像，以後保存在upload/目錄中。

上傳的圖片（文件）被髮送到服務器這樣的：

$.ajax({ 
     data: { file: e.dataTransfer.file }, 
     url: 'server/uploading_files.php', 
     method: 'POST', 
     success: function (response) { 
      .... 
     } 
}); 

而且我喜歡做同樣的，我只對他們的路徑圖片 - >靜態保存。
問題在於我要發送到服務器端的結構。因爲e.dataTransfer.file看起來是這樣的：

FileList{0: File, length: 1} 
    0: File 
     lastModified:1441797733000 
     lastModifiedDate:Wed Sep 09 2015 13:22:13 GMT+0200 (CEST) 
     name:"sp_dom1.jpg" 
     size:563989 
     type:"image/jpeg" 
     webkitRelativePath:"" 

而當我想保存靜態圖像，我只有路徑沒有任何結構。

有沒有解決方案如何裝箱上傳靜態圖像相同的結構？我不想使用2個不同的.php文件進行保存。

Answer 1

您可以利用XMLHttpRequest，與responseType設置爲"blob"，​​構造可在鍍鉻/鉻38+

var dfd = new $.Deferred(); 
 
var pathToImage = "http://lorempixel.com/50/50/"; 
 
var request = new XMLHttpRequest(); 
 
request.responseType = "blob"; 
 
request.open("GET", pathToImage); 
 
request.onload = function() { 
 
    var file = this.response; 
 
    dfd.resolve(
 
    new File([file] 
 
      , file.name 
 
       || "img-" + new Date().getTime() 
 
        + "." + file.type.split("/")[1] 
 
      , { 
 
       type: file.type 
 
       } 
 
    ) 
 
) 
 
}; 
 
request.send(); 
 

 
dfd.then(function(data) { 
 
    // do stuff with `data` 
 
    // i.e.g.; 
 
    // $.ajax({ 
 
    //  data: { file: data }, 
 
    //  url: 'server/uploading_files.php', 
 
    //  method: 'POST', 
 
    //  success: function (response) { 
 
    //   .... 
 
    //  } 
 
    // }); 
 
    console.log(data); 
 
    var img = new Image; 
 
    img.onload = function() { 
 
    $("body").append(this) 
 
    } 
 
    img.src = URL.createObjectURL(data); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script>