1

我正在构建一个相当大的表格。在某一时刻，用户可以上传图像。

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

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 标记中构建多个单独的表单，因为我还必须处理和提交多个表单。

我在这里想念什么？

4

2 回答 2

2

您可以使用“beforeSubmit”回调来修改正在提交的表单数据。为此，我们首先删除非文件类型的表单数据数组元素，然后使用定义的“干净”原型从数组中删除这些元素。

提交文件功能：

        $('#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;
    };

希望这可以帮助 ：）

于 2013-10-02T18:07:21.120 回答
0

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

于 2014-03-12T16:55:13.173 回答