javascript - 提交文件输入数组而不提交表单本身

Question

基本上，我正在试验基于网络的模拟电子邮件客户端。为此，我创建了一个文本编辑器，当用户希望在他们的消息中的某个位置放置或附加图像时，他们按下一个按钮来创建一个新的文件输入。上传后，这会在他们的消息中显示图片。

当用户发送消息时，消息中的图像 src 标签从 filereader 模板切换到新的 src，文件输入的值正在提交，图像传输到根文件夹中某处的新目录网站。这工作得很好。图片是独一无二的，每封邮件都有一个文件夹，其中包含来自邮件本身的图片。

我现在遇到的问题是，当用户希望将他们的消息保存为草稿时，我需要执行相同的过程。但是，唯一的区别是没有提交表单，我只是使用 ajax 来触发表单上传。我遇到的问题是我似乎无法访问文件输入的上传状态。我无法提交表单，因为当我提交时我会发送消息，这意味着我必须省略 $(form).submit( function (){}); 系统。

因此我的问题是:如何使用 ajax 提交一组文件输入？到目前为止，这是我的代码:

JS:

$('a[data-command="save-reply"]').click(function(){
    messid = 1;
    var draftbool2 = 4;

    imgS = [];

    $("#inbox-reply-body").find("img").each(function(){
        if($(this).attr("data-sub-src")){
            var imgO = $(this).attr("data-sub-src");
            var imgN = imgO.replace("postid", messid);
            $(this).attr("src", imgN);
            $(this).removeAttr("data-sub-src");
        }
    });

    $(".image-list-reply").find("input[type='file']").each(function(){
        imgS.push($(this));
    });
    alert(imgS);
    var imgArray = JSON.stringify(imgS);
    alert(imgArray);
    var prevMessage = $('#message-body').html();
    var content = $('#inbox-reply-body').html();
    var body = content + "<hr><div id=\"reply-message\">" + prevMessage + "</div>";

    //formdata submitting id, draftbool, and body
    var fd2 = new FormData();
    fd2.append('body', body);
    fd2.append('draftbool', draftbool2);
    fd2.append('idmessage', messid);
    fd2.append('image', imgArray);

    $.ajax({
        type: 'POST',
        url: "server/saveDraft.php",
        data: fd2,
        contentType: false,
        processData: false,
        success: function(done){
            alert(done);
        }
    });
});

PHP

$images = json_decode($_POST['image']);

foreach($images as $l){
    var_dump(implode(",", $images));
    foreach($l as $f => $name){
    $movedir = ("../resources/img/inbox/".$idofdraft."/");
    $dir = ("resources/img/inbox/".$idofdraft."/");

    $allowedExts = array("gif", "jpeg", "jpg", "png", "PNG", "JPG", "JPEG", "GIF");
    $temp = explode(".", $name);
    $extension = end($temp);
    //Set file type and size
    if ((($_FILES['image-reply']['type'] == "image/gif") || ($_FILES['image-reply']['type'] == "image/GIF") 
    || ($_FILES['image-reply']['type'] == "image/jpeg") || ($_FILES['image-reply']['type'] == "image/JPEG") 
    || ($_FILES['image-reply']['type'] == "image/jpg") || ($_FILES['image-reply']['type'] == "image/JPG") 
    || ($_FILES['image-reply']['type'] == "image/png") || ($_FILES['image-reply']['type'] == "image/PNG"))
    && ($_FILES['image-reply']['size'] < 1073741824)
    && in_array($extension, $allowedExts)){
        if($_FILES['image-reply']['error'][$f] > 0){
            echo "Return Code: ".$_FILES['image-reply']['error'][$f]."<br />";

        } else {
            if(file_exists($movedir)){
                echo " Directory Exists";
            } else {
                mkdir($movedir, 0777, true);
            }
            if(file_exists($movedir.$name)){
                echo " File already exists";
                $pathname = $dir.$name;
            } else {
                $names = $_FILES['image-reply']['tmp_name'];
                if(move_uploaded_file($names, "$movedir/$name")){
                    $pathname = ($dir."/".$name);
                    echo " File has been uploaded";

                    }
                }
            }
        }           
    }
}

HTML(在完整的 PHP 文件中回显，因此是\")

<form id=\"inbox-reply\" method=\"post\" action=\"server/replyMessage.php\" enctype=\"multipart/form-data\">
    <a href=\"#\" data-command=\"insertImage\"><i class=\"fa fa-image\"></i></a>
        <input type=\"file\" id=\"image-upload\" name=\"image\"/>
        <a href=\"#\" data-command=\"insertattach\"><i class=\"fa fa-paperclip\"></i></a>
        <input type=\"file\" id=\"file-upload\" name=\"file\"/>
        <a href=\"#\" data-command=\"save-reply\"><i class=\"fa fa-floppy-o\"></i></a>
    </div>
    <div id=\"inbox-reply-body\" class=\"reply-content\" contenteditable>
    </div>

    <div class=\"image-list-reply\">

    </div> 
    <div class=\"attach-list-reply\">

    </div>
    <input type=\"submit\" name=\"reply\" value=\"Send\">
</form>

通常我会将 foreach($l as $f => $name) 替换为 foreach($_POST['image-reply'] as $f => $name) 这会起作用，但在这里我应该通过 ajax 提交 $_POST['image-reply']，这迫使我将所有文件输入放在一个数组中。我的问题是从数组中获取它们作为可用的 php 元素。谁能帮帮我？

PS 抱歉我不够清晰，我不确定如何解决社区问题，更不用说这个问题了!简而言之，如何从通过 ajax 提交的文件输入数组中获取可用的文件输入数据？

Answer 1

您不能对 DOM 数组进行字符串化。

这是你必须做的:

var fd2 = new FormData();

$(".image-list-reply").find("input[type='file']").each(function(){
  $.each(this.files, function(i, file){
    fd2.append('image', file)
  })
});

此外，我仍然建议您使用 $(form).submit( function (){}); 您可以从中获得良好的 html5 验证，但另外还需要执行 event .preventDefault()