Question

我正在尝试提交包含“input type="file"，select，n input type="text"的表单。全部通过$.ajax，但与data:内的$.ajax()混淆。 new FormData m创建是自动掌握这些值还是我应单独插入data：

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function()
    {
    // Variable to store your files
    var files;

    // Add events
    $('input[type=file]').on('change', prepareUpload);
    $('form#upload_form').on('submit', uploadFiles);

    // Grab the files and set them to our variable
    function prepareUpload(event)
    {
    files = event.target.files;
    }

    // Catch the form submit and upload the files
    function uploadFiles(event)
    {
    event.stopPropagation(); // Stop stuff happening
    event.preventDefault(); // Totally stop stuff happening

    // START A LOADING SPINNER HERE

    // Create a formdata object and add the files
    var data = new FormData();
    $.each(files, function(key, value)
    {
    data.append(key, value);
    });

    $.ajax({
    url: 'jquery_upload_form_submit.php?files=files',
    type: 'POST',
    data: data,

    //data: {data, var1:  , var2: , var3: },

    cache: false,
    dataType: 'json',
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
    if(typeof data.error === 'undefined')
    {
    // Success so call function to process the form
    submitForm(event, data);
    }
    else
    {
    // Handle errors here
    console.log('ERRORS: ' + data.error);
    }
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
    // Handle errors here
    console.log('ERRORS: ' + textStatus);
    // STOP LOADING SPINNER
    }
    });
    }

    function submitForm(event, data)
    {
    // Create a jQuery object from the form
    $form = $(event.target);

    // Serialize the form data
    var formData = $form.serialize();

    // You should sterilise the file names
    $.each(data.files, function(key, value)
    {
    formData = formData + '&filenames[]=' + value;
    });

    $.ajax({
    url: 'jquery_upload_form_submit.php',
    type: 'POST',
    data: formData,
    cache: false,
    dataType: 'json',
    success: function(data, textStatus, jqXHR)
    {
    if(typeof data.error === 'undefined')
    {
    // Success so call function to process the form
    console.log('SUCCESS: ' + data.success);
    }
    else
    {
    // Handle errors here
    console.log('ERRORS: ' + data.error);
    }
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
    // Handle errors here
    console.log('ERRORS: ' + textStatus);
    },
    complete: function()
    {
    // STOP LOADING SPINNER
    }
    });
    }
    });

    </script>
    </head>
    <body style="text-align: center">
    <h1>Upload Form</h1>
    <form name="upload_form" id="upload_form" enctype="multipart/form-data" method="post" action="" style="padding:25px;
    border:1px solid #CC0000; text-align: center">
    <input type="file" name="upload_file" multiple />
    <input type="text" name="fb_link" style="border: solid 1px #90D8CF;"
    placeholder="Paste redirect link">
    <select name="show_fb" class="myselect">
    <option value="">---Select---</option>
    <option value="1">Show</option>
    <option value="0">Hide</option>
    </select>
    <input type="submit" name="submit" value="upload file" />
    </form>
    </body>
    </html>

Answer 1

你的`formData＆＃39;应该像这样初始化：

An error occurred while sending the request. Unable to connect to the remote server No connection could be made because the target machine actively refused it 127.0.0.1:9000

执行此操作后，您可以删除循环，循环表单输入。

Jquery ajax提交包含不同类型输入的FORM（文件，文本等）

1 个答案: