Javascript 使用php动态添加图片

我在获取存储在服务器上的图片及其在数据库中的路径时遇到问题，然后我想在同一页面上检索并显示它。到目前为止，我有一个

addphoto

按钮，它可以

onchange

触发照片进行一系列检查，然后存储它。但是，由于这种设置，页面会发生更改，但页面上还有其他信息需要输入。我假设我必须创建一些ajax函数，我在下面介绍了这些函数，但它不起作用。这是我到目前为止所拥有的

<div class="step1-container">
      <h3 class="steps-detail">Step 1:</h3>
      <p>Upload a picture for you new friends</p>
      <form action="../Controllers/fileupload_controller.php" method="post" enctype="multipart/form-data">
        Select image to upload:
        <label class="upload-cov">
          <input type="file" name="fileToUpload" id="fileToUpload">
          <span>Add Photo</span>
        </label>
        <input type="submit" id="photoSubmit" style="display:none">
      </form>
    </div>
    <div class="profile-pix">
    </div>

js:

阿贾克斯：

---

由于您希望使用ajax将文件作为多部分/表单数据发送到服务器，因此最简单的方法是发送表单的表单数据

示例代码：

//from within the on change event listener
$.ajax({
  //pass the form element to the form data object 
  data: new FormData($(this).parents('form'))
})

---

为什么你在（'change'、'file'…）的

中有
文件
？当我重新键入它时，它是一个打字错误，谢谢你指出，但这并不能解决问题@JosanIracheta为什么你将它更改为
输入
？@JosanIracheta这不是我正在操作的选择器吗？让我们来看看。
  $("#fileToUpload").change(function() {
      $('#photoSubmit').click();
    });

    $('#fileToUpload').on('change', 'input', function(e) {
      e.preventDefault();
      var str = $('#fileToUpload').serialize();

      $.ajax({
        type: 'POST',
        url:  '../Controllers/fileupload_controller.php',
        async:  true,
        traditional: true,
        data: str,
        success:  function (msg) {
          console.log(msg);

        }

    });

//from within the on change event listener
$.ajax({
  //pass the form element to the form data object 
  data: new FormData($(this).parents('form'))
})