使用 FormData ajax() 的多个输入时，jQuery 文件上传失败答案

【问题标题】：jQuery file upload fails using several inputs with FormData ajax()使用 FormData ajax() 的多个输入时，jQuery 文件上传失败
【发布时间】：2014-03-10 19:10:10
【问题描述】：

编辑我正在尝试通过 jQuery / ajax() 发送几个输入值，其中包含一个文件，而 ajax() 似乎并不同时支持两者。我发现 FormData 可以解决问题。 Using jQuery ajax to upload file and form data with formData() http://www.thefourtheye.in/2013/10/file-upload-with-jquery-and-ajax.html

更新我不再有任何错误，但文件未正确上传到 MySQL DB/LongBlob 列中。现在似乎在 PHP 文件中正确接收了它。

html

    <input type=hidden name=catselid id=catselid value=".$id.">
    <input name=city id=city>
    <input name=country id=country>
    <input type=file name=picture id=picture >
    <input name=update value=update type=submit class=update id=update  />

javascript

    $(".update").click(function(){

        $.ajax({
            url: 'catsel_change.php',
            type: 'POST',
            contentType:false,
            processData: false,
            data: function(){
                var data = new FormData();
                data.append('picture',$('#picture').get(0).files[0]);
                data.append('city' , $('#cityname').val());
                data.append('country', $('#country').val());
                data.append('id', $('#catselid').val());
                return data;
            }(),
                success: function(result) {
                alert(result);
                },
            error: function(xhr, result, errorThrown){
                alert('Request failed.');
            }
            });

    });

php

if(is_uploaded_file($_FILES['picture']['tmp_name'])){
    $picture =addslashes (file_get_contents($_FILES['picture']['tmp_name']));
...
}

仅供参考，我使用的是 jQuery 1.9.1 欢迎cmets/建议问候

【问题讨论】：

试试看这个答案：stackoverflow.com/questions/166221/… :)
malsup.com/jquery/form/#ajaxSubmit 发送带有文件的表单的 ajax/iframe 方法。

标签： php jquery ajax json

【解决方案1】：

无法通过真正的 ajax 调用向服务器发送文件。我建议您将表单放在隐藏的 iframe 中并从父级提交。

【讨论】：

当然有有种方法，使用HTML5 File API——但你必须自己实现。

【解决方案2】：

好的，我终于明白了。只是一个愚蠢的凌乱“，”留在了php文件中。现在一切正常。感谢您的帮助！

【讨论】：