您如何使用 AJAX 上传文件答案

【问题标题】：How do you upload file(s) with AJAX您如何使用 AJAX 上传文件
【发布时间】：2012-08-07 02:09:27
【问题描述】：

我目前正在尝试使用 jQuery 通过我制作的表单上传文件。这就是我想要做的：

    function ajax_upload(){
    var formData = new FormData($('form#userform'));
        $.ajax({
        url: location.protocol + "//" + location.host + "/profile/uploadPicture",
        dataType: 'json',
        data: formData,
        type: 'post',
        success: function(data, status){
        if (data.status == 'error') {
            $('#error').html(data.msg);
        }
        else {
            var filename = location.protocol + "//" + location.host + "/data/profiles/" + data.msg;

            $('input#filename').val(filename);
            close_upload_form();
            pop_profilechanger(filename);

        }
    }
});
    return false;

}

表单似乎发布到后端，但在尝试从上传的 JSON 对象中返回文件名时，例如： echo json_encode(array('status' => $status, 'msg' => $msg));

有什么问题吗？请告诉我

【问题讨论】：

虽然您没有说问题出在哪里，但出于所有意图和目的，我们应该将其保留在 jQuery 的范围内。 var formData = new FormData($('form#userform')); 应该是 var formData = $('form#userform').serialize() - 这将确保数据以字符串的形式发送到服务器，例如 name=george&email=george@george.com&validated=1...或者您的输入字段/值是什么...另外...我是否提到过，什么错误？
您不能直接通过javascript上传，因为它存在安全风险，并且浏览器级别的策略不允许这样做。有一些变通方法，涉及闪存、iframe、齿轮、套接字和其他各种技术。但总而言之，我认为 Flash 是你最好的选择。这也很可能是您无法上传任何内容的原因。是的，表单会发布，但不会像您预期的那样通过传统的 AJAX 方式与文件一起发布。查看 plupload 它的一个 jquery 上传器，它的设计非常基础，但非常有效
这样的问题最近两天被问了3-4次
毫无疑问，这两天被很多人问了几十遍。但是，说这个问题已经被问过并没有帮助，如果你有一个已经回答的问题的链接，以“可能的欺骗”条目的形式，那么提供它并提供帮助
jquery-ajax-file-upload

标签： php javascript jquery ajax ajax-upload

【解决方案1】：

这就是我的做法。如果您想了解更多信息，而不仅仅是我粘贴的代码，请查看此http://www.html5rocks.com/en/tutorials/file/dndfiles/，因为我的代码是为拖放文件编写的

        handleFiles : function(files, evt, target)
        {
            console.log(target);
            $.each(files, function(index, value)
            {
                var file = value;

                reader = new FileReader();
                reader.onload = function(evt)
                {
                    var li = $("<li class='uploading'><img data-image-id='0' src='" + evt.target.result + "' /></li>");
                    target.find('.imagesList').append(li);

                    var request = new XMLHttpRequest();
                    var formData = new FormData();
                    formData.append('image', file);

                    request.open("Post", settings.uploadImageUrl);
                    request.addEventListener("load", function(evt)
                    {
                        var id = evt.target.responseText;
                        li.removeClass('uploading');
                        li.find('img').attr('data-image-id', id);

                    }, false);
                    request.send(formData);
                };

                reader.readAsDataURL(value);

            });
        },

【讨论】：