通过表单提交图像和文本以及进度条

Question

我有一个包含图像和文本的表单，所有这些数据都需要插入数据库。

<form action="processupload.php" method="post" enctype="multipart/form-data" id="UploadForm">
    <input name="name" type="text" />
    <input name="age" type="text" />

    <input name="fileToUpload" type="file" />
    <input type="submit"  id="SubmitButton" value="Upload" />
</form>

但是我有一个特殊要求，我希望用户可以填写所有详细信息，但是当他来到上传部分时，我想要这样的视图

在哪里

• 用户填写文本字段
• 通过上传按钮选择图片
• 获取上传图片的预览（如图）
• 点击开始按钮，进度条将开始，直到图像上传完成
• 完成上述步骤后，用户将单击主提交按钮，然后整个数据应转到后端

processupload.php

的代码

if (count ($_POST) > 1)
    {
        $name = $_POST['name'];

        $target_dir = "uploads/";
        $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
        $uploadOk = 1;
        $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
        $new_filename = $target_dir . uniqid() . '.' . $imageFileType;
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $new_filename))
            {   
                // do something  
            }
     }

加载程序使用的脚本在这里@fidlde。谁能告诉我如何实现这个功能

脚本

$(document).ready(function() {
    var progressbox     = $('#progressbox');
    var progressbar     = $('#progressbar');
    var statustxt       = $('#statustxt');
    var submitbutton    = $("#SubmitButton");
    var myform          = $("#UploadForm");
    var output          = $("#output");
    var completed       = '0%';
  $(myform).ajaxForm({
      beforeSend: function() { //brfore sending form
          submitbutton.attr('disabled', ''); // disable upload button
          statustxt.empty();
          progressbox.slideDown(); //show progressbar
          progressbar.width(completed); //initial value 0% of progressbar
          statustxt.html(completed); //set status text
          statustxt.css('color','#000'); //initial color of status text
      },
      uploadProgress: function(event, position, total, percentComplete) { //on progress
          progressbar.width(percentComplete + '%') //update progressbar percent complete
          statustxt.html(percentComplete + '%'); //update status text
          if(percentComplete>50)
              {
                  statustxt.css('color','#fff'); //change status text to white after 50%
              }
          },
      complete: function(response) { // on complete
          output.html(response.responseText); //update element with received data
          myform.resetForm();  // reset form
          submitbutton.removeAttr('disabled'); //enable submit button
          progressbox.slideUp(); // hide progressbar
      }
    });
});

Answer 1

我希望你明白isset($_POST) 总是返回true，因为它是一个超全局的，你不应该这样检查。最好检查一下：

if (count ($_POST) > 1)

由于您有两个<inputs />，因此这是检查输入是否已输入的更好选择。单击取消，将不会停止上传过程，因为它是发送的单个请求，AFAIK。