現在、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 スクリプトを再利用したいからです。