Question

我正在动态添加元素上发出ajax请求。我的目的是更改刚上传并在页面上动态添加的图像（图像有一个更改按钮）。我面临的问题是，在ajax请求之后，PHP返回没有文件发送.i.e表单是在文件加载浏览之前提交的。

我无法添加提交按钮，因为只有一个按钮。

UI的屏幕截图（事件与更改按钮相关联）

通过单击并上传右侧的+按钮动态添加（相同的更改事件被触发，它对该事件工作正常）。

代码：

$('.img-holder').on("change",".upload_form_change",function(){
    /*var file = _("file_new").files[0];
    var formdata1 = new FormData();
    formdata1.append("file_new", file);
    var ajax = new createXMLHTTPObject();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", changeCompleteHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata1);*/

    var currentEle = $(this);
    console.log('fired');
    $.ajax({
      url: "file_upload_parser.php",
      type: "POST",
      data: new FormData(),
      contentType: false,
      cache: false,
      processData: false,
      success: function(data){
        //currentEle.html(img);
        console.log('success');
      }
    }, 1000);

  });

评论部分是我在+ icon ajax上传时使用的。

PHP

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

在顶部添加echo print_r($_FILES);时输出数组作为响应

 Array
(
    [file] => Array
        (
            [name] => Penguins.jpg
            [type] => image/jpeg
            [tmp_name] => E:\xampp\tmp\php3C47.tmp
            [error] => 0
            [size] => 777835
        )

)

在帖子

中返回的错误

Notice: Undefined index: file1 in E:\xampp\htdocs\file_upload_parser.php on line 2

Notice: Undefined index: file1 in E:\xampp\htdocs\file_upload_parser.php on line 3

Notice: Undefined index: file1 in E:\xampp\htdocs\file_upload_parser.php on line 4

Notice: Undefined index: file1 in E:\xampp\htdocs\file_upload_parser.php on line 5

Notice: Undefined index: file1 in E:\xampp\htdocs\file_upload_parser.php on line 6
ERROR: Please browse for a file before clicking the upload button.

正在追加的HTML

<div style="margin-bottom:10px; position: relative;" class="col-lg-4 text-center item">
<form class="upload_form_change" style="position:absolute;position: absolute;z-index: 9999;width: 71px;left: 40%;top: 36%;opacity: 0;" enctype="multipart/form-data" method="post">
    <input type="file" class="change-upload" name="file_new" id="file_new" value="&#43;">
</form><img src="test_uploads/'+ imageFileName[0] + '" alt="" class="img-thumbnail small">&nbsp;
<button class="btn btn-small btn-change"><a href="">Change</a>

忽略CSS

我该如何调试？

jQuery on change在加载之前提交数据

0 个答案: