4

Web ページに、ユーザーが画像をアップロードできるファイル入力があります。

画像を選択すると、ファイル入力の変更イベントがトリガーされ、画像のプレビューが表示されるように設定しています。

プレビューが表示されたら、画像をローカルで少し調整したい場合があります (たとえば、ペイントを使用してトリミングします)。次に、[ペイントで保存] をクリックし、ファイル入力をクリックして、もう一度ファイルを選択します。

問題は、ファイルを再度選択すると、画像データが変更されていても入力の変更イベントがトリガーされず、サーバーにファイルをアップロードしようとすると古い画像データが使用されることです。

ファイル入力変更イベントが発生したときではなく、ユーザーが実際にファイルを選択したときを検出して、うまく処理できるようにする方法はありますか?

編集: ユーザーが画像を選択するたびにファイル入力を削除して再作成できますが、これは機能しますが、ファイル入力に「ファイルが選択されていません」と表示され、ユーザーを混乱させることに注意してください。

4

2 に答える 2

7

簡単な解決策は、次の手順を実行することです。

this.input.addEventListener('click', function() {
    this.value = '';
}, false);

これにより、ファイル参照ポップアップを開く最初のクリックで入力がクリアされるため、ユーザーがファイルを選択するたびに変更イベントがトリガーされます。

于 2012-12-20T17:08:17.003 に答える
2 
this.input.bind('click', function() {
    this.value = '';
}, false);

.addEventListener()非推奨のtryの代わりに.bind()

于 2013-12-19T08:01:24.723 に答える