Ajaxアップロードファイル(JQuery編)

手順は元のJSとほぼ同じで、FormDataと協力してディレクトリ構造の1級test 2級imgs js(JQファイルを置けばよい)indexを使用する必要がある.html upload.phpサンプルコードHTML部分

    <h2>       h2>
       <form action="">
               <input name='icon' type="file">
        form>
    
    <img src="" alt="">

JS部

<script>
    /* jQuery         
        contentType         
             setRequestHeader("Content-type","application/x-www-form-urlencoded");
             false            
        processData
                    
                 formData    false      
    */

    $(function(){
      //       
      $('input').change(function(){
        //   FormData jQuery     dom    
        var formData = new FormData($('form')[0]);
        //   console.log(this);
        $.ajax({
            url:'./upload.php',
            type:'post',
            data:formData,
            contentType: false,//         ，      ，                (  ：#1)
            processData: false,//      data  ，  true(  ：false type   post，  ：#2)
            success:function(data){
                console.log(data);
                $('img').attr('src',data);
            }
        })
      })
    })

script>

PHP部

    
    //         
    move_uploaded_file($_FILES['icon']['tmp_name'],'./imgs/xxx.png');

    //          
    echo  './imgs/xxx.png';
    ?>