如何使用带有 json 和 php 的 jquery 的 $.ajax 函数上传文件答案

【问题标题】：How can I upload a file using jquery's $.ajax function with json and php如何使用带有 json 和 php 的 jquery 的 $.ajax 函数上传文件
【发布时间】：2012-05-16 13:59:15
【问题描述】：

我正在尝试使用 jQuery 的 $.ajax 函数上传文件，但没有得到任何输出。有人请帮我解决这个问题。我不知道这个脚本是否正确。我的脚本是：

$.ajax({
  url:'newsup.php',
  data: "",
  type: 'POST',
  contentType:'multipart/form-data',
  dataType: 'json',
  catche: 'false',

  success:function(data6)
  {
    $("#disp").removeClass().addClass((data6.error=== false)? 'success':'error').html(data6.msg).fadeIn('fast');
    //dele();
    if($("#disp").hasClass('success'))
    {
      alert("success");
      setTimeout("$('#disp').fadeOut('slow')",3000);            
    }
  },

  error:function(XMLHttpRequest,textStatus,errorThrown)
  {
    $("#disp").removeClass().addClass('error').html("There was an <strong>"+errorThrown+"</strong> error due to  <strong>"+textStatus+" condition").fadeIn('fast');
  }              

});

我还需要使用 jQuery 从文件上传字段获取数据的帮助。

【问题讨论】：

查找 plupload (plupload.com) 以获取执行 AJAX 样式的表单上传的示例。如果不使用嵌入式 iframe 来提交不可见的表单，则通过单个页面中的普通帖子提交带有文件的表单是非常困难的。 Plupload 还与 jQuery 很好地集成（至少这是我的经验）。
你有没有为此做过谷歌？我希望会有很多有用的结果。其中之一phpletter.com/Demo/AjaxFileUpload-Demo
如果您可以使用的话，有一个流行且经过良好测试的 jquery 插件，github.com/blueimp/jQuery-File-Upload
抓到？，它应该是“缓存”。可能是拼写错误？
我对使用任何插件都不感兴趣。我只想要一个通过 $.ajax 函数上传文件的最简单的解决方案。

标签： php jquery ajax json

【解决方案1】：

请为此使用插件。
在我看来，这个插件是更好的解决方案。您不需要记住所有选项等。只需将您的 'ajax' 替换为 'ajaxForm'。

请阅读以下示例
http://jquery.malsup.com/form/#ajaxForm

【讨论】：

我喜欢这个插件。我在我开发的每个网站中都使用它。当这个插件做得很好时，没有必要浪费时间手动对表单进行 AJAX 处理。
我尝试了 malsups $ajaxForm 插件，但我无法将存储在变量中的数据传递给 $ajaxForm() 函数。它只能通过直接从 $('#myForm1').ajaxForm(options); 之类的表单中获取数据来工作。我该如何克服这个问题。
如下所示，我可以将存储在数据变量中的数据传递给 ajaxForm 函数吗？ var data="formdata=data"; $(document).ready(function() { var options={ Target: '#output1', url: url, data: data}; $('#myform1').ajaxForm(options); });
@JOSEPHPAUL var data="formdata=data";必须是全局变量，因为 $(document).ready(function() {..} 这意味着你在不同的范围内
其实我的 jquery 不太好，如果你不介意可以给我举个例子

【解决方案2】：

我就是这样做的。使用 FormData 对象。

注意：for 语句的奇怪语法只是将“f”设置为 array[i] 实例。

        $("#submit").click(function () {
            var formData = new FormData();
            for (var i = 0, f; f = fileArray[i]; i++) {
                formData.append("opmlFile", f);
            }
            $.ajax({
                url: "/Documents/SaveFiles/" + @Model,
                type: "POST",
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            })
            .error(function (xhr, status, error) {
                $.notify(error, true);
            })
            .success(function (data, status, xhr) {
                $.notify("Success");
            });
        });

很遗憾，我不记得我是从哪篇文章中看到的，但这是 Stack Overflow 上的其他人。

【讨论】：

【解决方案3】：

AJAX 不支持文件上传。有像ajaxfileupload 这样的插件，它基本上会创建一个隐藏的表单并动态上传你的文件。

看看here 并阅读 Oli 的回答

【讨论】：

感谢您有兴趣回答我的问题并感谢您的回答。

【解决方案4】：

我正在使用它，它工作正常：

  $('#btnUploadFile').on('click', function () {
                var data = new FormData();
                var files = $("#fileUpload").get(0).files;

                // Add the uploaded file content to the form data collection
                if (files.length > 0) {
                    data.append("upload", files[0]);
                }

                // Make Ajax request with the contentType = false, and procesDate = false
                var ajaxRequest = $.ajax({
                    type: "POST",
                    url: "/api/documents",
                    contentType: false,
                    processData: false,
                    data: data,

                    error: function (xhr, status, error) {
                        console.log(xhr);
                        console.log(status);
                        console.log(error);
                        console.log(data);
                    }
                });

                ajaxRequest.done(function (xhr, textStatus) {
                    $("#response").attr('class', "alert alert-success");
                    $("#response").html("File uploaded successfully");
                });


            });

【讨论】：

你好，如何同时上传图片和数据..？
@gayan1991 您可以构建multipart/form-data 类型的请求/表单。请参阅stackoverflow.com/questions/4526273/… 也可能有帮助

【解决方案5】：

您可以使用Jquery File Upload Plugins 1 或Jquery File Upload Plugins 2 这两个插件中的任何一个，并且此脚本没有错误。

希望对你有帮助

谢谢，拉希德

【讨论】：

【解决方案6】：

Ajax 支持使用 FormData 对象上传文件，也支持除 IE8/9 之外的所有主流浏览器见下文

https://developer.mozilla.org/en-US/docs/Web/API/FormData

【讨论】：

【解决方案7】：

另一种选择是对文件内容进行 base64 编码并将其作为字符串发送，在后端对其进行解码。

【讨论】：

【解决方案8】：

只需使用表单上的提交事件来发送文件并防止默认表单操作

$('#form').submit(function(e) { return false; });

并通过

获取服务器端的文件

$_FILES['inputName'];

【讨论】：