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

Posted 2023-05-08

技术标签:

【中文标题】如何使用带有 json 和 php 的 jquery 的 $.ajax 函数上传文件【英文标题】：How can I upload a file using jquery's $.ajax function with json and php 【发布时间】：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 函数上传文件的最简单的解决方案。 【参考方案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 类型的请求/表单。请参阅***.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 编码并将其作为字符串发送，在后端对其进行解码。