ファイルダイアログで選択した直後に画像をアップロードするAJAXとPHP

Question

私は、ユーザーが特定の情報を入力したり、自分のコンピュータから画像を選択したり、自分の画像を選択してOKを押すと、アップロードされました。

<p>Upload image: <input type="file" name="imageToUpload" id="image" accept="image/*" /></p> 

ファイルダイアログでOKを押すと画像がアップロードされるはずです。 これ以外はすべてをやった。私は私のサーバー上の "画像"と呼ばれるフォルダに画像を保存したい。そして私は後でそれらを思い出すことができるように私のデータベースに画像の名前を保存したいと思います。 これはAJAXとPHPを使ってどのように行うのですか？また、イメージの形式を確認して、ユーザーがイメージではなく別のファイルをアップロードできないようにするにはどうすればよいですか？

Answer 1

まず、画像要素にイベントリスナーを設定する必要があります。私はあなたにネイティブのjavascriptの例を与えます。なぜなら、それはjQueryよりも速く、JavaScriptフレームワークを使用するペイロード（もしあなたがとにかくそれを使用していなければ）が重すぎるからです。何百キロバイトのjQuery Frameworkと5kBのネイティブソリューションを比較してください。

ここで行く：

<input type="file" name="imageToUpload" id="image" accept="image/*"> 
<script> 
    var fileNode = document.querySelector('#image'), 
     form = new FormData(), 
     xhr = new XMLHttpRequest(); 

    fileNode.addEventListener('change', function(event) { 
     event.preventDefault(); 

     var files = this.files; 
     for (var i = 0, numFiles = files.length; i < numFiles; i++) { 
      var file = files[i]; 

      // check mime 
      if (['image/png', 'image/jpg'].indexOf(file.type) == -1) { 
       // mime type error handling 
      } 

      form.append('my-files[]', file, file.name); 

      xhr.onload = function() { 
       if (xhr.status === 200) { 
        // do sth with the response 
       } 
      } 

      xhr.open('POST', 'upload.php'); 
      xhr.send(form); 
     } 
    }); 
</script> 

私は「何をここでやりましたか？要するに、私は最新の3つのメジャーバージョンのすべての現代のブラウザで動作するjavascriptネイティブFormData APIとXHR Objectを使って作業しています。次に、ファイルノードにイベントリスナーを配置します。これにより、ユーザーがファイルを選択するたびにchangeイベントがトリガーされます。 File APIでは、ファイルを取得してすべてのファイルをループします。ここでは、MIMEタイプとサイズに関するいくつかのチェックを実行できます。ファイルが有効な場合は、xhrオブジェクトでアップロードします。

あなたのupload.phpファイルは、もう一度すべてのセキュリティチェックを行う必要があります。 $ _FILES配列のMIMEタイプ、サイズ、エラーメンバーを確認してください。この例では、ファイルは$ _FILES ['my-files']に格納されています。

ドラッグアンドドロップのサポートとプログレスバーを表示するには、数日前にthis exampleを書きました。サイトのソースコードを見てください。