Question

我有一个包含多个字段的表单。其中一个字段需要上载文档（.doc，.docx，.pdf）文件。表单是一个AJAX表单，设置为每当用户离开（模糊）一个字段时，字段内容被AJAX到一些php，它将被保存到MySQL数据库。大多数情况下的表单都有效（我是AJAX的新手，而且根本不适合使用JS）但我似乎无法按照我的意愿使文件上传部分工作。目前我正在努力解决这个问题：

（直接相关）html：

   <td class="center" colspan="3">
    <input type="file" name="myfile"> <input type="submit" value="Upload">
    <div class="uploadProgress" style="border: 1px dotted green;">
     <div class="bar"></div>
     <div class="percent">0%</div>
     <div id="status"></div>
    </div>
    <div id="fileList"></div>
   </td>

.js文件中的JS：

// AJAX file uploader
(function() {
    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');

    $('#uploadFile').ajaxForm({
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
        },

        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },

        success: function() {
            var percentVal = '100%';
            bar.width(percentVal)
            percent.html(percentVal);
        },

        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    });
})();

我正在使用jQuery和jquery.form.js

目前我只想让表格的这一部分与php文件对话，但似乎想要html5验证标记为“必需”的其他字段，而不是忽略它们并上传所选文件。我怎么做到这一点？我不希望每次有人点击上传按钮时都提交整个表单，我只想要处理单个文件。

一旦我可以将它发送到php文件，我就可以轻松地处理它，并希望能够找到如何从那里返回结果列表的输出。所以刚开始就是这个问题。

链接到页面的小提琴我试图让文件上传功能工作。这显示了开始时的内容。 http://jsfiddle.net/k3dj214k/2/

提前致谢

Answer 1

ajaxForm准备要提交的表单，这意味着您不能以这种方式只提交表单的单个元素。

另一方面，您无法以在文件上传的情况下绕过其他元素的html5验证的方式实现ajaxForm。

所以：

您可以使用不同的库，这些库只允许从html文件输入（例如jQuery File Upload）上传文件。以下是example如何在没有表单的情况下仅实现文件上传的方法。
您可以从表单中删除文件上传元素，并将其放入另一个单独的表单中，以便文件上传表单不会干扰其他表单。

在ajax表单中启动文件上载而不提交整个表单

1 个答案: