まずjQueryの手助けなしに,JavaScriptでAjaxを使うためのXMLHttpRequest関数を直接呼び出してDrag&Dropファイルアップロード機能を実装してみました。
動作は下記のビデオを参照して下さい。
使用したものは,file_api_upload.htmlとupload.phpです。
使用方法は下記の手順となります。
- file_api_upload.htmlとupload.phpを同じディレクトリ(フォルダ)に入れておき(以下semiとします),”upload_files”というアップロードファイル格納用ディレクトリも掘っておく。
- File API使用可能なブラウザからhttp://localhost/semi/file_api_upload.htmlにアクセスし,DropエリアにファイルをDrag&Dropする
- アップロードボタンを押すとアップロード開始。画像ファイルは自動的に表示される。
これを改変して,Drag&Drop直後にアップロード開始となるバージョンも作ってみましょう。file_api_upload.htmlの改変のみで可能なはずです。実行例は下記の動画をご覧下さい。