Question

我正在使用JavaScript开发一套工具，但我在保存静态图像方面遇到了麻烦。首先，我创建了上载程序来上传稍后保存在upload/目录中的图像。

上传的图像（文件）将发送到服务器，如下所示：

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

我希望对我只有路径的图像做同样的事情 - ＆gt;静静地保存它们问题在于我正在向服务器端发送结构。因为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"，new File()构造函数可用于chrome / chromium 38 +

＆＃13;

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);
})

＆＃13;

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

＆＃13;

保存静态图像与上传图像相同

1 个答案: