Question

我无法将数据存储在服务器及其数据库中的路径上，然后我想检索并在同一页面上显示它。到目前为止，我有add photo按钮，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>

PHP：

if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    $_POST['UserId'] = $_SESSION['logname'];
    $_POST['ProfilePix'] = $target_file;
    if (storeData($_POST, $table, $cxn)) {
      $result = $target_file;
      //echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    }

JS：

  $("#fileToUpload").change(function() {
      $('#photoSubmit').click();
    });

AJAX：

    $('#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);

        }

    });

Answer 1

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

示例代码：

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

使用php动态添加图片

1 个答案: