Question

---解决

替换

$.ajax({ // create an AJAX call...
    type: $(this).attr('method'), // GET or POST
    url: $(this).attr('action'), // the file to call
    processData: false,
    cache: false,
    contentType: false,
    data: formData, // get the form data
    beforeSend: function() {
    $(".dynamicContentWindow").load("loading.php"); // hides the window during load
    },
    success: function(data, status) { // on success..
    $(".dynamicContentWindow").html(data); // update the DIV
    contentLoaded(); //recall the catchers for the new page
    },
});

使用：

var request = new XMLHttpRequest();
request.open("POST", $(this).attr('action'));
request.send(formData);

解决了这个问题。但是，我不明白为什么，我认为它没有在另一篇文章中解释过。如果somone能够指出这将是一个很大的缓解。

Heyho大家，我对使用jQuery很新，我目前正在尝试使用ajax建立异步文件上传。但是我的请求在php：//输入中一直结束，并且没有传递给$ _POST或$ _FILES。我昨天用Google搜索了整整一天并尝试了几件事，但我无法弄清楚问题所在。使用的服务器是apache 2.2.9（是的它实际上已经为博物馆准备好了，但它不是我的选择）

在这种情况下，html代码是：

<form action="ua_import_files.php" method="POST" enctype="multipart/form-data" class="file">
    <input type="hidden" name="tab_select" value="0" />
    <input type="hidden" name="MAX_FILE_SIZE" value="9999000000" />
    <input type="hidden" name="file_type" value="planview" />
    <input name="uploadedfile" type="file" size="40" style="background:#D0D0D0; font-size:10px;  margin-top:7px;" /></p>
    <br/>
    <br/>
    <input type="submit" value="Upload File" style="font-size:12px; width: 100px; margin-top:7px; float:left;display:block;" />
</form>

相关的javascript代码是：

$("form").each(function() {
    if($(this).attr('class') == "file") {
        $(this).submit(function(e){
        e.preventDefault(); // cancel original event to prevent form submitting
        console.log("File Upload, FileReader: " + window.FileReader + "FormData: " + window.FormData);
        var form = new FormData(this);
        console.log(form);
        $.ajax({ // create an AJAX call...
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            beforeSend: function() {
                $(".dynamicContentWindow").load("loading.php"); // hides the window during load
            },
            success: function(data, status) { // on success..
                $(".dynamicContentWindow").html(data); // update the DIV
                contentLoaded(); //recall the catchers for the new page
            },
            data: form, // get the form data
            processData: false,
            contentType: false,
            cache: false
            }); 
        });
    }
});

此时，console.log（）也会生成输出。但是，如果我然后在服务器上转储$ _FILES或$ _POST，我会在两种情况下都获得空数组。但是，当转储file_get_contents（“php：// input”）时，我得到了这个：

string(2941129) "-----------------------------29431251527956 Content-Disposition: form-data; name="tab_select" 0 -----------------------------29431251527956 Content-Disposition: form-data; name="MAX_FILE_SIZE" 9999000000 -----------------------------29431251527956 Content-Disposition: form-data; name="file_type" exp -----------------------------29431251527956 Content-Disposition: form-data; name="uploadedfile"; filename="file.exp" Content-Type: application/octet-stream EXP op 2015-08-13T00:00:00.000Z 2016-01-01T00:00:00.000Z XXX XXX ..."

（我只是这里的一些字符串）我已经检查了配置文件，它应该为服务器提供足够的资源来处理请求：

memory_limit = 128M;
max_execution_time = 3600; 
max_input_time = 600;
upload_max_filesize = 30M
post_max_size = 100M

我认为，我的标题有问题，这会阻止解析数据的服务器或配置中的其他错误，我还没有找到。有没有人有想法？

Answer 1

试试这段代码。给你的身份证明表格

var formData = new FormData（$（＆＃39; #yourformid＆＃39;）[0]）;

$。AJAX（{

        type: $(this).attr('method'),
        url:  $(this).attr('action'),
        data: formData,
        async: false,
        cache: false,
        processData: false,
        contentType: false,
        beforeSend: function() {
        $(".dynamicContentWindow").load("loading.php"); // hides the window during load
    },
    success: function(data, status) { // on success..
              your code 

        }
      });

致电phpinfo（）;并查看upload_max_filesize是否覆盖。

Answer 2

您的代码存在一些问题：

if($(this).attr('class') == "file") { // <---what $(this) is here
    $(this).submit(function(e){ // what $(this) in here? is it one of many forms?

现在你必须设置你要上传的文件，但你没有这样做。

    var form = new FormData(this); // <---what this belogs here.

还有其他几个问题。所以让我们来解决方案：

  $('.file').submit(function(e) { // submit the actual form
      e.preventDefault();
      var form = new FormData(this); // pass this as a reference to the form
      form.append('file', form.files[0]); //<----append the file here
      $.ajax({
        type: $(this).attr('method'), // <----form method as type in ajax
        url: $(this).attr('action'), // <-----form action as a url in ajax
        beforeSend: function() {
          $(".dynamicContentWindow").load("loading.php");
        },
        success: function(data, status) {
          $(".dynamicContentWindow").html(data);
          contentLoaded();
        },
        data: form, //<------------sending form which have `file` as a key to the file name
        processData: false,
        contentType: false,
        cache: false
      });
  });

您无需检查表单class="file"的类名，只需提交表单并使用FormData(this)制作formData，并将this作为参考然后，提交表单会将文件附加key : value对form.append('file', form.files[0]);。

作为旁注：

console.log(form);

您无法在控制台中查看所有内容，但最好查看浏览器的网络标签，您可以在标题中查看有关已发送的formdata的所有信息。

通过ajax上传文件最终在php：// input

2 个答案: