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

Question

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

当用户发送消息时，消息中的图像src标签从文件读取器模板切换到新的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($_POST['image-reply'] as $f => $name)替换foreach($l as $f => $name) foreach($_POST['image-reply'] as $f => $name) ，这样可行，但在这里我应该提交$ _POST ['image-reply']通过ajax，强制我将所有文件输入放在一个数组中。 我的问题是从数组中获取它们作为可用的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()