現在、jQuery と を使用したドラッグ アンド ドロップ ソリューションがありFileReader
、Chrome と Firefox で動作します。アップロードする画像のデータ URIをreadAsDataURL
取得し、そのデータを PHP に POST してサーバーにファイルとして書き込みます。
コードを大幅に要約しましたが、プロセスは次のようになります。
this.bind('drop', function(evt) {
evt.preventDefault();
evt.stopPropagation();
var files = evt.originalEvent.dataTransfer.files;
var file = files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
});
$.ajax
次に、データ URI を POST するために呼び出す別の関数があります。サポートできるブラウザのチェックもありますFileReader
。
$.fn.initUpload = function() {
return (window.FileReader) ? this.initDnD() : this.addClass('disabled');
}
whereinitDnD()
は前の例です。
.disabled
クラスについては<input type="file" />
、Safari/IE に頼っています。ユーザーが選択したファイルを取得して、すぐに Safari/IE のデータ URI に変換する方法はありますか? これは、データ URI を画像として保存する PHP スクリプトを再利用したいからです。