html 阿贾克斯でPHPにファイルをアップロードする

Posted 2021-05-11

        <-- you should use Bootstrap3 and jQuerry 2.1.3 or up --!>
        
        <div class="row">
        <form action="javascript:;">
          <input id="lefile" type="file" style="display:none">
            <div class="col-xs-8 form-inline">
                <input id="filepath" class="form-control" type="text">
                <a class="btn btn-default" onclick="$('input[id=lefile]').click();">Browse</a>
                <input type="submit" class="btn btn-primary" id="update" value="POST" />
            </div>
        </form>
        </div>
        
      <script>
      $('input[id=lefile]').change(function() {
        $('#filepath').val($(this).val().replace(/(c:\\)*fakepath\\/i, ''));
      });
      
      $(function(){
          $("#update").bind("click", function(){
            // loading message
            
            var fd = new FormData();
        
            if ( $("#lefile").val() !== '' ) {
              fd.append( "file", $("#lefile").prop("files")[0] );
            }
        
            var postData = {
              type : "POST",
              dataType : "text",
              data : fd,
              processData : false,
              contentType : false
            };
            
            $.ajax( "./upload.php", postData ).done(function( text ){
              // success message
            });
            
          });
        });
        </script>