[前後の物語]PHPはどのように画像をアップロードしますか?

最近、一部の友达は、写真をアップロードするときに引っかかりました.ある友达は、私はもう一日を無駄にして、どうすればいいか全然分からないと言った.こんな時は身を挺して出なければなりません.初心者にとって、画像をアップロードするのは複雑なことですが、今日はよく使われる2つの方法を整理して、初心者に画像をアップロードする小さな難題を簡単に把握させました.
(一)formフォームアップロード
この方式は単純暴力で、特別な需要がなければ、データと画像を一度に処理する場合、この方式が最適です.
フロントエンドのコード:

action要求のバックエンドメソッド

enctype=「multipart/form-data」ファイルアップロードコントロールを含むフォームを使用する場合は、この値を使用する必要があります.

バックエンドのコード:

public function upload(){
    //        
    $pic = $_FILES['pic']['tmp_name'];
    $upload_ret = false;

    if($pic){
        //      ，       
        $uploadDir = 'static/upload'; 
        //        
        if(!file_exists($uploadDir)){        
            mkdir($uploadDir, 0777);    
        }    
        //          ，    
        $targetFile = $uploadDir . '/' . time() . $_FILES['pic']['name'];    
        //                 ，      
        $upload_ret = move_uploaded_file($tempFile, $targetFile) ? true : false;
    }

    return $upload_ret;
}

簡単なformフォームでファイルをアップロードすれば終わります!
(二)ajax更新なしアップロード画像
従来のformフォームのコミットではページがリフレッシュされますが、ajax方式で要求される場合があります.
多くの人はJQueryのajax操作を思い浮かべるに違いないが、このようなやり方は役に立たない.一般的なパラメータしか伝わらないので、ファイルはアップロードできない.この時FormDataというものが現れて私たちを救った
FormDataについて
XMLHttpRequest Level 2には、FormDataオブジェクトを使用して、JavaScriptでいくつかのキー値ペアを使用して一連のフォームコントロールをシミュレートする新しいインタフェースFormDataが追加されています.XMLHttpRequestのsend()メソッドを使用して、このフォームを非同期でコミットすることもできます.通常のajaxよりもFormDataを使用する最大の利点は、バイナリファイルを非同期でアップロードできることです.Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+など、すべての主流ブラウザの比較的新しいバージョンがこのオブジェクトをサポートしています.
以下を参照してください.https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

オリジナルXMLHttpRequest

を実現
フロントエンドのコード:

jsのコード:

function upload(){
    //        
    var url="upload";
    //     
    var pic = document.getElementById('pic').files[0];

    //       XMLHttpRequest   
    var xhr = new XMLHttpRequest();
    //       FormData   
    var form = new FormData();

    //     
    form.append("pic", pic);
    //    
    xhr.open("POST", url, true);
    // readystatechange             
    xhr.onreadystatechange=callback;
    xhr.send(form);

    function callback() {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                if(xhr.responseText == 1){
                    alert('    ');
                    window.location.reload();
                }else{
                   alert("    ");
               }
            }
        }
   }
}

以下を参照してください.https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
バックエンドコード:メソッド1のように、変更されません.

JQuery+FormDataで

を実現
実はJQueryも操作可能ですが、古いバージョンではサポートされていないので、2.0と更新バージョンを使うことをお勧めします.
フロントエンドコード:

  
       ：
      ：
    
  

jsコード:

function upload(){  
    var form = new FormData($("#upload_form")[0]);  
    $.ajax({  
      url:'upload',  
      type:'POST',  
      data:form,  
      success:function (result){  
        alert(result);  
      },  
      error:function (result){  
        alert(result);  
      }  
   });  
}  

バックエンドコード:メソッド1のように、変更されません.
更新されていないアップロード画像機能も、簡単にできました!
まとめ
一般的には業務の選択に応じて実現され、文章の中では主にどのように実現するか、いくつかの細部の処理か、それともみんなが自分で処理する必要があるかを教えています.質問やアドバイスがあれば、連絡してください.