jquery.ajax - 提交时检查文件答案

【问题标题】：jquery.ajax - check file on submitjquery.ajax - 提交时检查文件
【发布时间】：2013-12-09 12:07:55
【问题描述】：

我需要检查提交事件的文件，所以我做了以下操作：

$(document).ready(function(){
  $("form").submit(function(){
        data = new FormData();
        data.append('picture', $('#picture-field')[0].files[0]);

        $.ajax({
            url: 'checkit.php',
            data: data,
            processData: false,
            cache: false,
            contentType: false,
            type: 'POST',
            dataType: "json",
            success: function (data) {
                alert(data.error)
            }
        });
  });
});

但这不起作用。返回的数据没有显示，有人可以帮帮我吗？

【问题讨论】：

添加alert 以查看event is triggered。添加error method 以查看url 是否正确。不确定是否需要设置contentType: false。另外，您的JSON 有效吗？
看起来表单提交没有被阻止，可能正在刷新页面，从方法返回false
好的，如何检查是否设置了文件输入？

标签： jquery ajax file upload submit

【解决方案1】：

尝试阻止表单提交操作

$(document).ready(function () {
    $("form").submit(function (e) {
        //stop the default form submit action
        e.preventDefault();

        var files = $('#picture-field')[0].files;
        if (!files.length) {
            alert('select a file')
            return;
        }

        var data = new FormData();
        data.append('picture', $('#picture-field')[0].files[0]);

        $.ajax({
            url: 'checkit.php',
            data: data,
            processData: false,
            cache: false,
            contentType: false,
            type: 'POST',
            dataType: "json",
            success: function (data) {
                alert(data.error)
            },
            error: function (jqXhr, status, error) {
                alert(status + ':' + error + ':' + jqXhr.responseText)
            }
        });
    });
});

【讨论】：