サムネイルとドラッグアンドドロップで複数の画像をアップロードするPHP

Question

ドラッグ＆ドロップ機能を使用して複数の画像をアップロードしたいのですが、特定のケースでオンラインで検索することはできません。

私は16：9の比率でアップロードした画像のサイズを変更し、アップロードされたサムネイルを表示したいと思います。また、私は素晴らしいアップロードボタンとしてスタイルを設定するためにいくつかのCSSを書いたラベルを使用しています。そのラベルで隠しファイルのアップロード入力をトリガーします。

<label for="image">Upload image</label> 
<input type="file" name="images[]" id="image"> 

私はイメージ（複数可）、サイズ変更、アップロードスクリプトに画像（複数可）を送信するためにクリックし、サーバーとリターンに（それらを）アップロード、私はそれぞれの「アップロード画像」ボタンをjqueryのAJAXを使用する必要があります考え出し私はリサイズされた画像のサムネイルを表示することができるように、jqueryへの画像パスをレスポンスとして返します。同じことがドラッグ＆ドロップの機能になり、私は 'ドロップ'を聞いて、スクリプトをアップロードするためにドロップされた画像を送信します。

これまでのことすべてを問題なく動作させることができましたが、すべての入力が完了したらユーザーがボタンをクリックしてフォームを送信するまで、画像をサーバーに実際にアップロードしたくありません。だから私の質問は、私はこの方法で画像を操作し、最後の送信ボタンがクリックされるまでローカルのどこかにサーバーをアップロードするのではなく、

私はサーバー上の "temp"フォルダにajaxを使って画像をアップロードし、フォーム送信時にそれらを "images"フォルダに移動し、cronを設定してそのフォルダを1日1回空にし、ユーザーがフォームの記入を開始したり、画像をアップロードしたり、「submit」フォームをクリックして「temp」フォルダ内のすべての画像を削除する直前に、その画像が失われてしまうことを避けたいのです。

Answer 1

ファイルが選択されるたびに（ファイル入力変更時に）jqueryを介して新しいファイル入力を作成し、以前のすべてのファイル入力からidを削除し、作成したid = "image"を設定しましたラベルがクリックされたときにも機能します。

プレビューサムネイルを表示する私はFileReaderを使用し、アップロードされた画像をサムネイルdivの背景として設定し、レスポンシブ16：9スケール（パディング - ボトム：56.25％）に設定しました。フォームが送信されると、サーバー上で実際のイメージのクロッピングが発生します。