如何允许独立的文件从表单中上传？

Question

我正在构建一个支持联系人表单，用户可以上传文件。文件上传使用AJAX进行管理:用户可以上传文件，然后在方便的情况下提交表单。但是，当前的布局并不是美观的:上传输入在表单提交按钮下面。

我读过关于嵌套表单和新的form属性的文章，我认为这样做会奏效：

<form action="" method="post" enctype="multipart/form-data" id="main-form">
...
    <form action="/upload_file_ajax.php" method="post" id="file-upload-form">
    <div class="form-group row mb-3 mb-3">
        <label class="col-sm-3 col-lg-3 col-form-label" for="file"><?php echo $label['attach-file']; ?></label>
        <div class="col-sm-8 col-lg-7">
            <input class="form-control custom-file-input" name="file" id="file" type="file" form="file-upload-form" />
        </div>
    </div>
    </form>

    <div class="form-group row">
        <div class="col-4 offset-3">
            <button type="submit" name="submit" class="btn btn-outline-success" form="main-form"><?php echo $label['submit-button']; ?></button>
        </div>
    </div>

    </form>

我已经将form属性添加到每个输入和按钮中。但是，当我添加文件时，内部表单(“文件-上传-表单”)根本不会提交。

这可能是因为这是一个自动提交的输入，即Javascript在选择文件时触发AJAX吗？这是触发线：

$('#file-upload-form').on('change', function(e){
...

一旦我将嵌套表单移动到主窗体的关闭</form>标记下面，它就能工作了。

如果美学布局可以实现任何其他方式，例如，文件上传输入可以出现在提交按钮之上，而不嵌套表格，请告诉我。

​

​

​

​

编辑:这是修改后的Javascript，负责通过AJAX上传文件。我已经删除了建议的内部form标签，但输入仍然不会提交。

$(function(){
    // listen for input changes (when a file is selected)
    $('#file-upload-input').on('change', function(e){
        //var formData = new FormData();
        // file has been selected, submit it via ajax
        $.ajax({
            type: 'POST',
            url: "/upload_file_ajax.php",
            data: new FormData(this),
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                // the upload_file_ajax.php endpoint returns the file name and a status message for the uploaded file
                console.log(data.filename, data.message);
                // we then inject these into the main data form
                var $hiddenInput = $('<input type="hidden" name="uploads[]" value="'+data.filename+'">');
                $('#main-form').append($hiddenInput);

                // show a thumbnail maybe?
                var $thumbnail = $('<img src="/uploaded_files/'+data.filename+'" width="40" height="40" />');
                $("#preview").append($thumbnail);

                $("#status").html(JSON.stringify(data.message));

                // reactivate file upload form to choose another file
                $('#file-upload-input').val('');
            },
            error: function(){
                console.log("error");
            }
        });
    });
}); 

修改后的HTML如下所示：

<form action="" method="post" enctype="multipart/form-data" id="main-form">
... (other inputs here)...
    <div class="form-group row offset-3 mb-3">
        <div class="col-12" id="preview"></div>
        <div class="col-12" id="status"></div>
    </div>

    <div class="form-group row mb-3 mb-3">
        <label class="col-sm-3 col-lg-3 col-form-label" for="file"><?php echo $label['attach-file']; ?></label>
        <div class="col-sm-8 col-lg-7">
            <input class="form-control custom-file-input" name="file" id="file" type="file" id="file-upload-input" form="file-upload-form" />
        </div>
    </div>

    <div class="form-group row">
        <div class="col-4 offset-3">
            <button type="submit" name="submit" class="btn btn-outline-success" form="main-form"><?php echo $label['submit-button']; ?></button>
        </div>
    </div>

    </form>

Answer 1

我就是这样解决问题的。我在这里找到了答案，就这样，但再也找不到到帖子的链接。

独立上传文件、不提交表单或没有<form>...</form>标记的问题是，FormData();不像存在<form>...</form>标记时那样包含文件。因此，您需要将该文件附加到其中。

这是我负责文件上传的全部jQuery代码。在成功的情况下，它创建了包含上传文件信息的附加表单input标记，这样我就可以将它们与表单一起提交。它还为每个上传的图像创建了一个缩略图，并在input旁边创建了一个删除按钮，以防用户改变主意。

$('#file-upload-input').change(function(){
    var file_data = $('#file-upload-input').prop('files')[0];
    var form_data = new FormData();
    // pass the file itself – needed because the input is submitted without <form> tags
    form_data.append('file', file_data);
    // pass website language variable to the PHP processor to load the correct language file
    form_data.append('lang', '<?php echo $lang; ?>');
    $.ajax({
        url: "/ajax_upload_file.php",
        type: "POST",
        data: form_data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data){
            // the upload_file_ajax.php endpoint returns the file name and a status message for the uploaded file
            console.log(data.filename, data.message);
            // we then inject these into the main data form
            var $hiddenInput = $('<div class="input-group mb-1"><input class="form-control" readonly type="text" name="uploads[]" value="'+data.filename+'" /><input type="button" name="delete_'+data.filename+'" id="delete_'+data.filename+'" value="Delete" class="delete btn btn-outline-danger ms-2" /></div>');
            $('#uploaded_files').append($hiddenInput);
            // show a thumbnail if the uploaded file is an image
            var $thumbnail = $('<img src="/uploaded_files/'+data.filename+'" height="75" id="img_'+data.filename+'" class="me-1" />');
            $("#preview").append($thumbnail);
            // print a status message returned from the PHP processor
            $("#status").html(data.message);
            // reactivate file upload form to choose another file
            $('#file-upload-input').val('');
        },
        error: function(){
            console.log("error");
        }
    });
});

这是相关的HTML。它包含div，用于包含上传文件名称的input、缩略图(称为“预览”)和从PHP脚本返回的状态消息。

    <div class="form-group row offset-2 mb-3">
        <div class="col-sm-8 col-lg-7" id="uploaded_files">
        </div>
    </div>

    <div class="form-group row offset-2 mb-3">
        <div class="col-12" id="preview"></div>
    </div>

    <div class="form-group row offset-2 mb-3">
        <div class="col-12" id="status"></div>
    </div>

    <div class="form-group row mb-3 mb-3">
        <label class="col-sm-3 col-lg-2 col-form-label" for="file"><?php echo $label['attach-file']; ?></label>
        <div class="col-sm-8 col-lg-7">
            <input class="form-control custom-file-input" name="file" type="file" id="file-upload-input" />
        </div>
    </div>