0

私のウェブサイトにファイルをアップロードしています。

<form enctype="multipart/form-data" action="post.php" method="POST">
<input id="uploadInput" name="uploadedfile[]" type="file" multiple>
<input type="submit" value="PREVIEW POST">
</form>

コードはこの画像をプレビューします

ここに画像の説明を入力

ユーザーがアップロードするファイルを選択すると、この画像が表示されます

ここに画像の説明を入力

JavaScriptを使用すると、ユーザーの選択後およびアップロード時に、単純なテキストをそのすぐ横に表示したいと考えています。

ここに画像の説明を入力

すべてのファイルがアップロードされると、アップロードが完了したと表示されます

ここに画像の説明を入力

上記はjavascriptまたはjqueryだけで実行できますか?

はいの場合、どのように？

（シンプルにしてテキストを表示したいだけです。プログレスバーは必要ありません。）

4

3 に答える 3

1

これはかなり単純なケースですが、この関数を適切にクロスブラウザーにするために少し作業が必要です。これらのほとんどを処理してくれるライブラリがあります。そのようなライブラリの 1 つがFine Uploaderです。Fine Uploader の「基本」モードを使用すると、独自の UI を作成しながら、ライブラリが提供するクロスブラウザー アップロード コードをすべて利用できます。

完全な開示: 私は Fine Uploader の主要なメンテナーです。

于 2013-03-28T15:42:37.550 に答える
1

簡単な答えはい、これは JavaScript を使用して行うことができます。

より長い答えは、バンクエンドとフロントエンドで注意すべきことがあります。ゼロから行うのではなく、Jquery-file-uploadを使用してこれを行うことをお勧めします。明らかに、これまでに何を試したかについては言及していません。したがって、これを機能させる方法については、 wiki docを参照してください。

更新 これについては前に言及しませんでしたが、Ajax (iFrame の回避策/XHR ファイルのアップロード) を使用せずに JavaScript を使用するだけでは、これを行うことはできません。

于 2013-03-28T06:04:20.227 に答える
0

ajax でファイルをアップロードしたいと思います。このドキュメントに従ってください。http://www.sitepoint.com/html5-ajax-file-upload/

于 2013-03-28T06:04:03.263 に答える