未定义的索引，这是怎么回事？

Question

我正在使用 jquery form js 上传实时图像。以下是我的代码。

HTML

<form id="imageform" name="imageform" method="POST" enctype="multipart/form-data" action="ajax/ajax_quotation_imageUpload.php"  >
  <div class="form-group col-md-12" style="margin-bottom: 0px;">
    <label>Select Image File :</label>
    <input type="file" class="form-control qimage" name="qimage">
  </div>
  <img src="images/loader2.gif" id="loader" style="display: none;">
  <div class="clearfix"></div>
</form>

脚本

$('.qimage').on('change', function(){ 
  $('#loader').show();
  $(".qimage").attr("disabled", "true");
  $("#imageform").ajaxForm({ 
    success:   function(data) {
      alert(data);
    } 
  }).submit();    
});

PHP 页面

$filename = stripslashes($_FILES['qimage']['name']);
echo $filename;

这是我的完整代码。每当我上传文件时，它都会返回未定义的 qimage。我在哪里得到错误的代码？

Answer 1

您在提交表单数据$(".qimage").attr("disabled", "true"); 之前禁用了file-input 元素，因此不会提交其数据。

提交详细信息后禁用它。

Answer 2

在 HTML5 之前，有很多 jQuery 技术和插件来实现 AJAX 文件上传。 HTML5 引入了可以简化文件上传的 FormData 类。 要构造一个包含现有数据的 FormData 对象，请在创建 FormData 对象时指定该表单元素：

var formData = new FormData(someFormElement);

有关 FormData() 的更多信息，请遵循文档https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

---

HTML

<form id="imageform" name="imageform" method="POST" enctype="multipart/form-data">
  <div class="form-group col-md-12" style="margin-bottom: 0px;">
    <label>Select Image File :</label>
    <input type="file" class="form-control qimage" name="qimage">
  </div>
  <img src="images/loader2.gif" id="loader" style="display: none;">
  <div class="clearfix"></div>
</form>

jQuery

<script>
    $(document).ready(function(e) {
        $('.qimage').change(function() {
            if (window.FormData){
               var formdata = new FormData($('#imageform'));
            }else{
               var formData = $('#imageform').serialize();
            }

            $.ajax({
                type: 'POST',
                url: 'ajax/ajax_quotation_imageUpload.php',
                data: formData,
                cache: 'false',
                success: function(res) {
                    alert(res);
                }
            });
            return false;
        });
    });
</script>

PHP 代码

<?php
$filename = stripslashes($_FILES['qimage']['name']);
echo $filename;
?>