6

imgurJavascriptにアップロードするpngために使用しようとしています。Imgur API の例から直接コードを使用しましたが、png ファイルを適切に渡しているとは思えません。というエラー メッセージが表示されます。いくつかの異なるpngでこれを試したので、ファイルは問題ないと思います。私のコードは次のとおりです。file.type is undefined

<html>
<head>
<script type="text/javascript">
function upload(file) {
   // file is from a <input> tag or from Drag'n Drop
   // Is the file an image?
   if (!file || !file.type.match(/image.*/)) return;

   // It is!
   // Let's build a FormData object
   var fd = new FormData();
   fd.append("image", file); // Append the file
   fd.append("key", "mykey"); // Get your own key: http://api.imgur.com/

   // Create the XHR (Cross-Domain XHR FTW!!!)
   var xhr = new XMLHttpRequest();
   xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
   xhr.onload = function() {
      // Big win!
      // The URL of the image is:
      JSON.parse(xhr.responseText).upload.links.imgur_page;
   }

   // Ok, I don't handle the errors. An exercice for the reader.
   // And now, we send the formdata
   xhr.send(fd);
}
</script>
</head>   

<body>

<button type="button" onclick="upload('test.png')">upload to imgur</button> 

</body>
</html>

pngファイルは、test.pnghtml ファイルと同じディレクトリに保存されます。

4

2 に答える 2

3

ファイルはFile、HTML5 fileAPI で作成されたオブジェクトである必要があります。単にファイル名を付けて動作することを期待することはできません。

Javascript はファイルシステムにアクセスできません。ドラッグ アンド ドロップまたはファイル入力を使用して指定されたファイルにのみアクセスできます。

于 2012-02-12T14:49:35.073 に答える
2

使用している例では、input 要素 (type=file) を使用して画像をアップロードすることを想定しています。この例を試してください。このようなCanvas を使用して画像データにアクセスできます。

要約すると、これを行う必要があります。

  1. ファイルを使用して新しいイメージを作成します (ローカル ドメインにある必要があります)。
  2. オンロード時にキャンバスに画像を描画します
  3. この方法を使用して画像データを抽出する
  4. そのデータをここのようにimgurに渡します
于 2012-02-12T14:54:06.747 に答える