Question

我需要做什么：

我有一个带有文件输入和隐藏文本输入的上传表单。用户上传图像，图像被操纵然后发送到远程服务器进行处理需要几秒钟，然后远程服务器将最终图像发送回家庭服务器，并将它们保存在新文件夹中。 JavaScript需要访问这些新图像，以便对新保存的图像进行进一步的数据处理（这也需要一秒钟）。只有在JavaScript完成了它并且更新了表单的输入变量之后才能提交表单。

现在我已经完成了所有单独的工作，但是一次性执行所有操作都被证明是一项挑战。

我上传图片的代码：

PHP：

 if(isset($_POST['submit'])){
 //do image manipulation and save new files using PHP
 }

JS：

 function furtherProcessing() {
 //do further processing on newly saved images in newly created directory,
 //update hidden input variables for the form
 }

再次

PHP：

 if(isset($_POST['input_variables'])){
 //send these variables to SQL database
 }

我知道尝试使用JavaScript来获取新保存的图像并不是一种理想的方法，但我使用的框架只能在JavaScript中使用。只需点击一下即可实现这一点吗？

Answer 1

你可以这样做：

在您的HTML中，将data-processed="false"添加到您的表单中，如下所示：

<form action="upload.php" method="post" name="q_data" data-processed="false" enctype="multipart/form-data">

在你的jQuery中调用它来通过ajax提交图像：

$("form[name='q_data']").submit(function(e) {
  var $this = $(this);
  var processed = $this.data('processed')
  if (processed == false) {
    e.preventDefault();
    var formData = new FormData($(this)[0]);
    $.ajax({
      url: "upload.php", 
      type: "POST",
      data: formData ,
      async: false,
      success: function(msg) {
        //alert(msg);
        if (msg !== 'success') {
          $this.data('processed', true)
          furtherProcessing();
        }
      },
      cache: false,
      contentType: false,
      processData: false
    });
  }
});

function furtherProcessing() {
  //do further processing on newly saved images in newly created directory,
  //update hidden input variables for the form
  $("form[name='q_data']").submit();
}

在some-page.php执行此操作：

if(isset($_POST['some-image-input-name'])){
 //do image manipulation and save new files using PHP

 return 'success'
}

然而，如果是我，我会有第一个ajax调用（保存图像）只返回已保存图像的URL，然后不需要第二个ajax调用来检索它们，我假设是你现在在做什么

运行PHP，等待;运行JavaScript，等待;然后提交表单？

1 个答案: