web-dev-qa-db-ja.com

ファイルアップロードフィールド値の設定-Javascript / jQuery

ファイルアップロードフィールドのあるフォームページがあり、そのフィールドの値をプログラムで設定しようとしています。セキュリティ上の理由から不可能であることはわかっていますが、それでも可能かどうか知りたいのですが。アップロードを実行するために使用できるプラグインまたは何かがある場合。そのフィールドを設定するために必要なファイルフィールドのBase64値があります。私が知る必要があるのは、それを設定する方法があるかどうかだけです。

どんな提案や助けもこの点で素晴​​らしいでしょう。

ありがとう。

更新：私が試していることを示すためにJsFiddleを追加しました。

このWebサイトにアクセスして、jsフィドルの例を使用してテキストファイルを作成し、このリンクを使用して変換してください。

var str = `text`;

http://www.motobit.com/util/base64-decoder-encoder.asp

JsFiddle

注：

以下の回答は、2009年のレガシーブラウザの状態を反映しています。2017年にJavaScriptを使用して、ファイル入力要素の値を動的/プログラムで実際に設定できるようになりました。

詳細とデモについては、この質問の回答を参照してください。
プログラムでファイル入力値を設定する方法（つまり、ファイルをドラッグドロップする場合）？

javascriptjqueryhtmlfile-uploadsetvalue
15
Neophile

Base64文字列をblobに変換し、それをformDataに追加してから、ajaxリクエストで送信できます。

$("#form").submit(function(e) {
  e.preventDefault();
  formData = new FormData($(this)[0]);
  var blob = dataURLtoBlob("base64 string");
  formData.append("yourfile", blob);
  $.ajax({
    url: "whatever.php",
    type: "POST",
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data) {
      alert("Form has been submitted with file");
    }
});

dataURLtoBlobは、base64文字列をバイナリファイル（blob）ソースに変換する関数です。 DataURLからのBlob？

5
seahorsepip

最も簡単な方法は、<form>タグのフォームのactionフィールドにAJAX POSTリクエストを送信することです。これが通常のHTMLはとにかくそれ自体で機能しますが、この場合はプログラムでデータを指定できます。この場合はマルチパートファイルです。

例については、 this の質問を参照してください。

0
Shayne Fitzgerald

送信フォームなしの単純なファイルアップロード。

HTML

<input id="inputfileUpload" onchange="fileChanged(this);" type="file" accept="*/*" />

JavaScript

function fileChanged(element) {
  if (element.files[0]) {
    var file = element.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
      //file.name
      //file.size

      //Filedata: e.target.result
      //You can convert to base64
      //Angular sample:
      //$base64.encode(e.target.result);
    };
    reader.readAsBinaryString(file);
 }
}
0
Alair Tavares Jr

ファイルフィールドのBase64値があります[...]それを設定する方法があるかどうかを知る必要があります。

隠された入力を持つことは不可能でしょうか？入力type="hidden"の-​​ 最大サイズ はtype="file"と同じであるため、base64をそのフィールドに設定します。

このようにして、ローカルファイルの読み込みを妨げるセキュリティ上の理由を回避し、base64表現を送信できるようにします。唯一の問題は、このbase64文字列がどのようになっているのかわからないことです。リクエストから読み込まれますか？すでにphpから入力されていますか？ .。

0
Gregoire

file type inputは、ファイル自体ではなく、formsubmitで送信されるファイルへのパスを受け入れます。

UPD：ええと、現在はもう少し複雑です（ ファイルAPI ）、しかしこれはあなたにアクセスを与えることを目的としていますユーザーがあなたに提供したいデータに。

ファイルを送信するために、実際にfileinputをいじる必要はありません。

サーバーを所有している場合は、通常のtextinputフィールドからのbase64文字列を有効なファイルとして（通常のファイルフィールドの代わりに）いつでも受け入れることができます。

それ以外の場合は、いつでもajax（ text または blob ）を使用してformを送信できます。

0
haldagan