AJAX POST函数未上载文件

AJAX POST function not uploading file

本文关键字：上载 文件 函数 POST AJAX      更新时间：2023-10-16

我一直在尝试将文件上传支持调整为我的AJAX post函数。我不确定我在这里错过了什么？

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;
}

我忘记了onreadystatechange，因为我正在查看的网站决定只做一半的教程，而且我很累。

这将动态地通过一个表单，并上传每一个上传的文件。

EDIT:添加了文件输入元素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;
}

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

Ajax文件上传

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

下面的URL可能会有所帮助。

通过AJAX Post 将文件输入作为FileReader二进制数据发布

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

相关文章：