WPエンジンでは、デスクトップからブラウザーウィンドウにファイルを転送し、それらをサーバーにアップロードする機能が多くの人に見られました。 これを見たとき、私はそれがどのように組織されているのだろうと思いました。 それから私はジャングルに登りました、私はほとんど迷子になりましたが、まだ解決策を見つけました。 すべてが非常にシンプルであることがわかりました。
何が必要ですか？
HTML5 + jQuery + PHPの少しの知識。
さあ、行きましょう。
最初に、ミニアプリケーションの作業を記述します。
1）ユーザーは自分のPCで1つ以上のファイル（この場合は画像ファイル）を選択し、これらのファイルをドラッグアンドドロップAPIをサポートするブラウザーウィンドウにドラッグします（より正確には、ユーザーはダウンロードのために指定された場所にファイルを転送します）。
2）この後、イベントがトリガーされ、APIを使用して、ダウンロードしたファイルに関する情報を取得し、一時メモリに保存します。
3）次に、XMLHttpRequestオブジェクトのsendAsBinaryを送信する新しいメソッドを使用して、一時メモリからサーバーにファイルを送信します。
おそらく上記は完全に明確ではありませんが、今では誰もがすべてを理解するでしょう。
車輪を再発明するのではなく、jQuery FileDropプラグインを使用してください。 しかし、自転車を発明しなかったため、欠点が1つあります。このプラグインは、FirefoxおよびChromeブラウザーでのみ機能します。 これは驚くべきことではありません。HTML5を使用してアプリケーションを記述しているため、すべての主要なブラウザーがまだそれをサポートしているわけではないからです。 しかし、これにこだわるつもりはありません。
index.htmlファイルを作成します
このコンテンツでは：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title> Drag & Drop API.</title> <link rel="stylesheet" href="css/styles.css" /> </head> <body> <!-- --> <div id="dropbox"> <!-- --> <span class="message"> </span> </div> <!-- jQuery --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <!-- FileDrop --> <script src="js/jquery.filedrop.js"></script> <!-- js --> <script src="js/script.js"></script> </body> </html>
さらに進む..
ここで、 FileDropプラグインとjQueryライブラリのアクションを組み合わせたハンドラーを作成し、小さな制限を作成します。
$(function(){ var dropbox = $('#dropbox'), message = $('.message', dropbox); dropbox.filedrop({ paramname:'pic', maxfiles: 5, maxfilesize: 2, url: 'post_file.php', uploadFinished:function(i,file,response){ $.data(file).addClass('done'); }, error: function(err, file) { switch(err) { case 'BrowserNotSupported': showMessage(' HTML5!'); break; case 'TooManyFiles': alert(' 1 5 '); break; case 'FileTooLarge': alert(file.name+' . 2.'); break; default: break; } }, beforeEach: function(file){ if(!file.type.match(/^image\//)){ alert(' !!!!'); return false; } }, uploadStarted:function(i, file, len){ createImage(file); }, progressUpdated: function(i, file, progress) { $.data(file).find('.progress').width(progress); } }); var template = '<div class="preview">'+ '<span class="imageHolder">'+ '<img />'+ '<span class="uploaded"></span>'+ '</span>'+ '<div class="progressHolder">'+ '<div class="progress"></div>'+ '</div>'+ '</div>'; function createImage(file){ var preview = $(template), image = $('img', preview); var reader = new FileReader(); image.width = 100; image.height = 100; reader.onload = function(e){ image.attr('src',e.target.result); }; reader.readAsDataURL(file); message.hide(); preview.appendTo(dropbox); $.data(file,preview); } function showMessage(msg){ message.html(msg); } });
さて、アプリケーションを作成し、styles.cssファイルを作成して実行します（ソースコードと共にアーカイブに配置されます）。
これで、クライアント部分で終わり、サーバー部分に進みます。
小さなPHPハンドラーを作成しましょう。
<?php // function exit_status($str){ echo json_encode(array('status'=>$str)); exit; } function get_extension($file_name){ $ext = explode('.', $file_name); $ext = array_pop($ext); return strtolower($ext); } $upload_dir = 'uploads/'; // $allowed_ext = array('jpg','jpeg','png','gif'); // if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){ exit_status(' !'); } if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){ $pic = $_FILES['pic']; if(!in_array(get_extension($pic['name']),$allowed_ext)){ exit_status(' : '.implode(',',$allowed_ext)); } // , if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){ exit_status(' !'); } } exit_status(' '); ?>
これですべてです！ 次に、ローカルサーバーを起動し、サイトを開いてテストします。 次のようになります。
1）ブラウザページを開くだけ
2）最初のファイルをダウンロードする
3）2番目のファイルをダウンロードする
4）6個のファイルをダウンロードする
それだけです アップロードフォルダを確認すると、その中にダウンロードされたすべての画像が表示されます。
ソースはこちら
デモ版はこちら
ご清聴ありがとうございました！
PS。 目標として、サーバーにファイルをアップロードしてさらに表示するための完全に機能するアプリケーションを作成するというタスクを自分で設定しませんでした。 そして、かなり新しいロード方法をデモンストレーションしたかっただけで、多くの人にとって興味深いものだったと思います。