web-dev-qa-db-ja.com

ファイル入力の値を動的に設定

ファイル入力の値を設定する方法はありますか(<input type="file" />)またはセキュリティのためにすべてブロックされていますか? Google GearsのopenFilesを使用して、シンプルなマルチアップローダーを作成しようとしています。

注:

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

詳細およびデモについては、この質問の回答を参照してください。
ファイルの入力値をプログラムで設定する方法(つまり、ファイルをドラッグアンドドロップするとき)?

66
Alex S

ファイルフィールドの値を動的に変更することはできません。そうしないと、「c:\ yourfile」に設定して、ファイルを非常に簡単に盗むことができます。

ただし、マルチアップロードシステムには多くのソリューションがあります。私はあなたが複数選択のオープンダイアログを持ちたいと思っていると思います。

おそらく http://www.plupload.com/ をご覧ください。これは、複数のファイルのアップロードに対する非常に柔軟なソリューションであり、ドロップゾーンなどをサポートしています。

66
Joel

私はangular jsアプリに取り組んでおり、同様の問題に直面しています。dbから画像を表示し、現在の画像を削除または保持するボタンを作成しました。現在の画像を保持することに決め、ng-submit属性を画像検証を必要としない別の関数に変更し、元の画像パス名を変更せずにdbのレコードを更新しました。フォームを送信し、画像の検証とアップロードを含む関数に戻りますまた、新しい画像をアップロードするためにビューにスライドするJavaScriptも少し含まれています。

私は同様の問題を抱えていたので、JavaScriptからこれを書いてみましたが、うまくいきます! :referenceToYourInputFile.value = "" ;

0
CESAR SORO

誰かがこの質問に出くわした場合に備えて、AngularJSでこのようなことをしました。

const imageElem = angular.element('#awardImg');

if (imageElem[0].files[0])
    vm.award.imageElem = imageElem;
    vm.award.image = imageElem[0].files[0];

その後:

if (vm.award.imageElem)
    $('#awardImg').replaceWith(vm.award.imageElem);
    delete vm.award.imageElem;
0
jstudios