Question

我一直在努力调整文件上传支持到我的AJAX帖子功能。我不确定我在这里缺少什么？

function ajax_post(url,param)
{
 if (url.substr(0,11)=='javascript:') {result = 'Error: form submits to JavaScript function.\n\nFunction can not be processed when passed off by onsubmit event handler.';}
 else
 {
  var xhr = false;

  if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();}
  else if (window.ActiveXObject) {try {xhr = new ActiveXObject('Msxml2.XMLHTTP');} catch (e) {try {xhr = new ActiveXObject('Microsoft.XMLHTTP');} catch (e) {}}}

  if (!xhr) {var result = 'Error: your browser does not support AJAX.'; browser_upgrade_notice();}
  else 
  {
   xhr.open('POST',url,true);
   var f = document.getElementById(id_page).getElementsByTagName('form');
   for (var i=0;i<f.length;i++)
   {
    if (f[i].compareDocumentPosition(option.submit)==20)
    {
     f = f[i];
     break;
    }
   }
   var i = f.getElementsByTagName('input');
   var k = 0;
   for (var j=0;j<i.length;j++)
   {
    if (i[j].type=='file')
    {
     k++;
     break;
    }
   }

   if (k==0)
   {
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xhr.send(param);
   }
   else
   {
    xhr.setRequestHeader('Content-Type','multipart/form-data');
    xhr.setRequestHeader('Cache-Control','no-cache');
    xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');

    var fd = new FormData();

    var z = param.split('&');
    for (var j=0;j<z.length;j++)
    {
     var y = z[j].split('=');
     fd.append(y[0],y[1]);
    }

    for (var j=0;j<i.length;j++)
    {
     if (i[j].type=='file')
     {
      fd.append('file_'+j,i[j].files[0]);
     }
    }
    xhr.send(fd);
   }

   if (xhr.readyState==4)
   {
    var result = xhr.responseText;
   }
  }
 }

 return result;
}

Answer 1

我忘记了onreadystatechange因为我所看到的网站决定只做一半教程而且我累了。

这将动态浏览表单并上传每个文件上传。

编辑：添加了文件输入元素multiple属性支持。

function ajax_post(url,param)
{
 if (url.substr(0,11)=='javascript:') {result = 'Error: form submits to JavaScript function.\n\nFunction can not be processed when passed off by onsubmit event handler.';}
 else
 {
  var xhr = false;

  if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();}
  else if (window.ActiveXObject) {try {xhr = new ActiveXObject('Msxml2.XMLHTTP');} catch (e) {try {xhr = new ActiveXObject('Microsoft.XMLHTTP');} catch (e) {}}}

  if (!xhr) {var result = 'Error: your browser does not support AJAX.'; browser_upgrade_notice();}
  else 
  {
   xhr.open('POST',url,true);
   var f = document.getElementById(id_page).getElementsByTagName('form');
   for (var i=0;i<f.length;i++)
   {
    if (f[i].compareDocumentPosition(option.submit)==20)
    {
     f = f[i];
     break;
    }
   }
   var i = f.getElementsByTagName('input');
   var k = 0;
   for (var j=0;j<i.length;j++)
   {
    if (i[j].type=='file')
    {
     k++;
     break;
    }
   }

   if (k==0)
   {
    xhr.send(param);
   }
   else
   {
    var fd = new FormData();

    var z = param.split('&');
    for (var j=0;j<z.length;j++)
    {
     var y = z[j].split('=');
     fd.append(y[0],y[1]);
    }

    for (var j=0;j<i.length;j++)
    {
     if (i[j].type=='file')
     {
      for (var m=0;m<i[j].files.length;m++)
      {
       fd.append('file_'+j+m,i[j].files[m]);
      }
     }
    }
    xhr.send(fd);
   }

   xhr.onreadystatechange = function()
   {
    if (xhr.readyState==4)
    {
     var result = xhr.responseText;
     alert('result = '+result);
    }
   }
  }
 }

 return result;
}

Answer 2

通过XHR是不可能的。您必须使用文件上传表单创建一个隐藏的iFrame，并通过javascript提交。

Ajax file upload

Answer 3

您可以尝试发送二进制数据，而不是将文件发送到服务器。

以下网址可能会有所帮助。

Posting File Input as FileReader Binary Data through AJAX Post

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data?redirectlocale=en-US&redirectslug=DOM%2FXMLHttpRequest%2FSending_and_Receiving_Binary_Data#section_3

AJAX POST功能不上传文件

3 个答案: