ajax完成后如何调用post

Question

如果调用 ajax，我想在完成后调用表单提交按钮。
我的页面有两个按钮。
一种是通过ajax上传图片。
另一个是提交按钮。

函数上传（数据）{ console.log（上传开始）； $.ajax({ 类型：“发布”， 网址：“图像存储”， 数据：数据， 超时：3000 }).done(函数(数据){ console.log('上传完成'); }).faile(函数(){ }); } 函数提交（）{ console.log('提交开始'); var form = document.createElement('form'); form.setAttribute('方法', 'post'); form.setAttribute('action', '/nextpage'); form.submit(); }

如果用户在提交按钮之前使用上传按钮。 控制台日志是这样的。

上传开始
提交开始

图像未存储在服务器中。

如果用户很久以前使用上传按钮，那没问题。

上传开始
上传完成
提交开始

等待完成上传功能的最佳方式是什么。

Answer 1

从提供的详细信息中不清楚，是每个表单上传单个图像文件，还是有可能存在多个图像文件。以下是图片上传成功后处理提交的一种方式。

• 将函数 upload(data) 更改为返回 ajax promise。

function upload(data) {
    console.log('upload start');
    return $.ajax({
        type: "POST",
        url: "imagestore",
        data: data,
        timeout: 3000
    });
}

• 定义一个函数safeSubmit()，依次上传未处理的图片文件，最后处理表单提交。

function safeSubmit() {
    var unprocessed_file_datas = [/* Array of unprocessed file uploads, get this from the form */];
    var processing_index = 0, processing_length = unprocessed_file_datas.length;
    if (processing_length > 0) {
        function safeUpload() {
            return upload(unprocessed_file_datas[processing_index]).then(() => {
                processing_index++;
                return processing_index < processing_length ? safeUpload() : 'all files uploaded';
            });
        }
        safeUpload()
            .then(function () { submit(); })
            .fail(function (error) { console.log(error); });
    } else {
        submit();
    }
}

现在使用safeSubmit() 函数作为表单的提交动作按钮。

Answer 2

您还可以使用在提交其他主要表单数据之前完美处理文件上传的库，让您的生活更轻松。

Easy File Uploading With JavaScript | FilePond

Github filepond

将multiple 属性添加到文件输入以创建多文件 放置区域。

使用data-max-files 属性限制文件的最大数量。 放下图像，FilePond 将呈现快速预览。它也会 正确的移动照片方向信息。

一个可以上传你扔给它的任何东西的 JavaScript 库， 优化图像以加快上传速度，并提供出色的、可访问的、 丝般流畅的用户体验。

简而言之，

1. 安装文件池。
   npm install filepond
2. 将库导入您的项目。

import "filepond/dist/filepond.min.css";
import * as FilePond from "filepond";

// Create a file(s) upload component.
const $filepond = $("#filepond-input");

FilePond.create($filepond.get(0), {
    multiple: false, // Change to <true> for multiple file uploads.
    name: "images", // The element 'name' sent to server.
    required: true,
})

// Define the server(backend) routes that will
// receive the respective requests sent by Filepond.
FilePond.setOptions({
    server: {

    /*This will be the 'server' route that will
    * receive/process the file(s).
    * This happens when a user uploads the file(s).
    * The request will include the 'images' request parameter
    * with  uploaded file(s) as it's value.
    * The 'server' route must respond/return with a unique identifier(s)
    * for the saved/processed file(s). i.e a file_id(s).
    * */
        process: {
            url: `/imagestore`,
            method: "POST",
            onerror: $error => console.log($error)
        },

    /*This will be the 'server' route that will
    *receive the request to delete the file(s).
    * It will essentially receive a 'request payload'
    * containing the unique file identifier(s) to be deleted
    * from the server.
    * This happens when a user clicks the ❌ icon in Filepond's
    * User interface.
    * You can use this unique file identifier(s) to pick out
    * the resource(file(s)) to be deleted on the server.
    * The 'server' route may respond/return with a success/error
    * response depending on how the deletion process goes.
    * */
        revert: {
            url: `/imagerevert`,
            method: "DELETE",
            onerror: $error => console.log($error)
        }
    }
});


// Handle main form submission.
// Equivalent to your submit function.
const $submitBtn = $("#submit-form-btn");
const $form = $("#form");

$submitBtn.click(function (e) {
    e.preventDefault();

    $.ajax({
        type: $form.attr("method"),
        url: $form.attr("action"),
        data: $form.serializeArray(),
        success: function ($response) {
            // Handle success. i.e show success message.
            // alert("Successful");
        },
        error: $error => console.log($error)
    });
});

1. 定义您的常规 HTML 表单。

<form id="form" method="POST" action="/nextpage">
    <input required type="file" id="filepond-input" name="images"/>
    <!--Other form elements here.-->
    <!--Other form elements here.-->
    <button type="submit" id="submit-form-btn" class="btn btn-primary">Submit</button>
</form>

这种情况下主表单提交服务器路由/nextpage会正常接收其余的表单输入元素。

此外，在这种情况下，它将接收 images 作为请求参数 key 和 请求负载，其中包含您之前发送的唯一文件标识符处理路由/imagestore作为请求参数value(s)。

然后，您可以将文件路径保存到数据库或根据您的用例对文件执行某些操作。