Question

我正在构建一个相当大的形式。用户可以一度上传图像。

此图片应立即上传。然后用户应该继续填写表格。

HTML

<form name="registration" id="registration" action="confirm.php" method="post">
  <input name="firstname" id="firstname" type="text" />
  <input name="lastname" id="lastname" type="text" />
  <!-- file upload -->
  <input name="file" id="file" type="file" />
  <input name="newsletter" type="checkbox" id="newsletter" />
  <input name="captcha" id="captcha" type="tel" />
</form>

Javascript（jQuery）

 //upload file on change event
 $('#file').change(function() {

    // put the image object into a variable
    // formData is incomaptible with IE9/8/7
    fileData = new FormData();
    fileData.append('file', this.files[0]); 

      var options = {  
           // XMLHttpRequest Level 2 - no cross-browser support
           data: fileData,   
           url: 'upload.php', // override standard url for this call only
           type: 'post'
      };

      // make an ajax call to post the image           
      $.ajax(options);

      // Alternatively use the jQuery Form plugin          
      // $('#registration').ajaxSubmit(options);


 });

不幸的是，当我想要仅提交输入文件字段时，jQuery表单插件http://malsup.com/jquery/form/#file-upload会提交整个表单。

另外，我宁愿避免在我的HTML标记中构建多个单独的表单，因为我必须处理并提交多个表单。

我在这里缺少什么？

Answer 1

您可以使用“beforeSubmit”回调来修改正在提交的表单数据。为了实现这一点，我们首先删除不是文件类型的表单数据数组元素，然后通过使用“clean”原型定义从数组中删除这些元素。

提交文件的功能：

        $('#file').change(function () {
            $('#registration').ajaxSubmit({
                url:'upload.php',
                type: 'post',
                beforeSubmit: function (formData, $form, options) {
                    $.each(formData, function (i, obj) {
                        if (obj != null) {
                            if (obj.type != "file")
                                delete formData[i]; //delete the elements which are not required.
                        }
                    });
                    formData.clean(undefined);//remove deleted elements
                }
            });
        });

清洁原型：

    Array.prototype.clean = function (deleteValue) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == deleteValue) {
                this.splice(i, 1);
                i--;
            }
        }
        return this;
    };

希望这会有所帮助：）

Answer 2

您所要做的就是设置表单的隐藏值，将值捕获到服务器端并仅处理文件上载工作，忽略传递给服务器的其他表单变量。这使它更容易。您可以在文件上传工作完成后设置隐藏值（这次告诉服务器端它应该处理表单的所有变量）。

仅提交输入文件jQuery Form Plugin

2 个答案: