静止画像をアップロードした画像と同じように保存

Question

JavaScriptで一連のツールを開発していますが、静止画像の保存に問題があります。まず最初に、アップローダーを作成して画像をアップロードし、後でupload/ディレクトリに保存します。

アップロードされた画像（ファイル）は、次のようにサーバに送信されます。

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

そして私は、私は彼らに唯一のパスを持っていたイメージと同じことをするのが大好きだ - >静的に保存します。
問題は構造上サーバー側に送信しています。

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:"" 

そして、私は、静的な画像を保存したいとき、私は任意の構造を持たない唯一のパスを持っている：e.dataTransfer.fileはこのようになりますので。

スタティックイメージのアップロードで同じ構造を作成する方法はありますか？私は保存のために2つの異なる.phpファイルを使用したくありません。あなたは"blob"からresponseTypeセットで、XMLHttpRequestを利用することができ

Answer 1

、PetrBečka@クロム/クロム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>