使用AJAX将文件上载到服务器

Upload A File To Server Using AJAX

本文关键字：服务器 上载 文件 AJAX 使用      更新时间：2023-09-26

我正在尝试使用这里的方法来执行AJAX文件上传，但没有成功。我添加了几个警报进行调试，但无法达到以下代码的第二个断点：

  $.validate({
    form: '#frmSlide',
    modules: 'file, html5',
    validateOnBlur: false,
    errorMessagePosition: 'top', // Instead of 'element' which is default
    scrollToTopOnError: false, // Set this property to true if you have a long form
    onSuccess: function($form) {
      alert('1');
      var file_data = $('#frmSlide').prop('files')[0];
      alert('2');
      var form_data = new FormData();
      alert('3');
      form_data.append('file', file_data);
      $.ajax({
        url: 'upload.php', // point to server-side PHP script 
        dataType: 'text', // what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'post',
        success: function(php_script_response) {
          alert(php_script_response); // display response from the PHP script, if any
        }
      });
    }
  });
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSlide">
  <div class="form-group">
    <label class="col-sm-4 control-label" for="imgfile">Image file</label>
    <div class="col-sm-8">
      <input type="file" id="imgfile" data-validation="required ratio mime size" data-validation-allowing="jpg, png, gif" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8 col-md-offset-4" id="image-holder">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label" for="seq">Sequence</label>
    <div class="col-sm-8">
      <input class="form-control server" name="f_seq" id="f_seq" data-validation="number" data-validation-allowing="range[1;4]" type="text" value="" placeholder="Enter 1-4" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-8">
      <button name="btnUpd" id="btnUpd" type="submit" class="clsUpd btn btn-primary"><i class="fa fa-floppy-o"></i>&nbsp;Update</button>
    </div>
  </div>
</form>

有人能指出我做错了什么吗？谢谢

表单没有文件。。但是文件输入有。。因此您可以使用$('#imgfile').prop而不是$('#frmSlide').prop

var file_data = $('#imgfile').prop('files')[0];
相关文章：