2011-08-19 21 views
7

通常、ファイルをアップロードするには、2段階の処理が必要です。ファイルを選択してアップロードを確認します。プロフィール写真をアップロードしています。プロフィールの写真は通常小さいので、ファイルの選択時にファイルのアップロードを開始することで、ユーザーのマウスクリックを減らしたいと考えています。これを達成するための良い、そしておそらく一般的な方法を提案してください(もしあれば、その落とし穴を学びたいと思います)。ありがとう。選択時にファイルをアップロードする

答えて

6

changeファイルアップロードフィールドからファイルを選択すると、イベントが発生します。ファイルが選択されていない(フィールドが消去されている)場合、フィールドの値は''になります。

<form method="post" action="upload.script"> 
    <input type="file" id="formfile"/> 
    <input type="submit" id="formsubmit"/> 
</form> 

<script type="text/javascript"> 
    var file= document.getElementById('formfile'); 
    var submit= document.getElementById('formsubmit'); 

    // If scripting is available, can auto-submit the form, so no submit 
    // button needed. 
    // 
    submit.parentNode.removeChild(submit); 

    // When field is filled in with a filename, submit form 
    // 
    file.onchange= function() { 
     if (this.value!=='') 
      this.form.submit(); 
    }; 
</script> 

これは良い考えですか?疑わしい。ユーザーが期待していない場合にフォームを自動的に送信すると、それが悪影響を受ける可能性があります。

+0

あなたのソリューションを提供していただきありがとうございます。あなたが言及した問題については、私のケースではそれが大きな懸念を引き起こさないと思う。 – tamakisquare

+0

IE8以降ではform.submit()への呼び出しは失敗し、アクセスが拒否された場合は低くなります。 –

+0

@Maurice:? IE6でうまく動作します。 – bobince

3

あなたが自動的に選択時にサーバにファイルを投稿するjQueryのを使用することができます...

問題:

どのユーザーdoesntのは、そのファイルを選択したいが、ファイルが既ににアップロードされた場合サーバ?

ファイルのアップロードが完了する前に前の場合はどうなりますか?

ユーザーが何もしないでページを閉じるとどうなりますか?どのくらいの期間ファイルを保管しますか

1

Gmailを使用している場合、電子メールにファイルを添付するためのドラッグドロップソリューションがあることがわかります。あなたのデスクトップから、あらかじめ定義されたリージョンとwallahにドラッグします。

これを使用している人のためのHTML5サポートがある場合(ほとんどの場合、最新の状態に維持する必要があります)、HTML5に組み込まれたドラッグドロップを使用できます。

は、この見て試してみてください。http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

またPluploadのようなものを試し(http://www.plupload.com/)を与えることができるが、それは、このためにやり過ぎかもしれません。 Pluploadは、より進んだアニメーションやチャンクを必要とする大きなファイルに適しています。しかし、アップロードがすぐに開始され、完了するとすぐにリダイレクトするようにスクリプトを記述できることはわかっています。また、設定していないサーバー側の作業が必要になる場合もあります。

関連する問題