0

XHR2でファイルをサーバーに投稿する際に問題が発生しました。次の問題があります。

2つのパラメータとFILEを使用してURLへのPOSTを実行したいと思います。POSTリクエストをバックエンドでinput=fileを使用したように動作させたいのですが。

目標は次のようなものです。

function sendForm(FILE_URI, GO_TO) {
  var formData = new FormData();

  formData.append('param1', "param1");
  formData.append('param2', "Param2");

  // Now we add the file
  formData.append("file", FILE_URI);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', GO_TO, true);
  xhr.onload = function(e) { ... };

  xhr.send(formData);

  return false; // Prevent page from submitting.
}

このコードは機能せず、サーバーは「file」パラメーターを$ _FILEとして認識しません（私はPHPを使用しています）。フォームにはファイルアップロード要素はありません。URIを使用した非表示の入力になります。

<input type="hidden" id="file_item" value="/path/to/image" />

これに関するガイダンスはありますか？

アップデート

INPUTファイルの編集が悪いことを理解しています-私はそれをしたくありません。FORMなしでファイルをサーバーにPOSTする他の方法を見つけたいです。XHR2を使用してフォームなしでBLOBをアップロードできますが、XHR2を使用してParams + File（またはBlob）を作成する方法を探しています。

4

2 に答える 2

1

これについて考えます。ランダムなページに移動すると、ページに非表示のフィールドが配置され、コンピューターからファイルがアップロードされる可能性があります。それは良いデザインですか？これが、ファイル入力の値を設定できない理由です。立ち入り禁止です。セキュリティの悪夢です。

それがインターネット上の何らかのファイルへのパスである場合、なぜ Web サーバーはそれを取得しないのでしょうか?

これで、キャンバスを使用してサーバー上でプロキシを使用し、その方法でファイルをアップロードすることで回避できるようになりました。

于 2013-01-28T20:36:21.943 に答える
-1

フォームには、値 multipart/form-data を持つ属性 enctype が必要です

<form enctype="multipart/form-data">...</form>

また、file 要素を使用し、css を介して非表示にする必要があります (非表示フィールドは機能しません)。

<input type="file" id="file_item" value="/path/to/image" style="visibility: hidden;">

ファイル要素のスタイルを設定できないため、おそらくこれを行っていますか? ファイルダイアログを開くこれを参照してください（ファイル要素のクリックをトリガーすることにより）

HTML:

<input type="file" id="file_item" value="/path/to/image" style="visibility: hidden;">
<button id="my-btn">click me for opening file dialog</button>

JS:

document.getElementById('my-btn').onclick = function () {
  document.getElementById('file_item').click();
};

ここで働くフィドル：http://jsfiddle.net/LM6zQ/

于 2013-01-28T20:37:59.197 に答える