Question

好的下面的代码是发送文件名但是对于表单数据，它发送[object HTMLInputElement]或[object HTMLSelectElement]我需要更改什么来获取表单中的值？

function _(el){
return document.getElementById(el); }

function uploadFile(){
var file = _("file1").files[0];
//alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
formdata.append("djname", _("djname"));
formdata.append("archive_date", _("archive_date"));
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "include/file_upload_parser.php");
ajax.send(formdata); }

部分表格

Date of Broadcast:
<input type='date' id='archive_date' name='archive_date' required>
Show Descripton (optional):<br>
<textarea rows='4' id='description' cols='50' name='description'>
<input type="file" name="file1" id="file1" accept="audio/mp3"><br>

Answer 1

您必须从元素中获取值，就像从文件输入中获取文件一样。

formdata.append("djname", _("djname").value);
formdata.append("archive_date", _("archive_date").value);

Answer 2

当您使用XMLHttpRequest时：

function ajax(a,b,e,d,c){// Url,callback,method,formdata
 c=new XMLHttpRequest;
 c.onload=b;
 c.open(e||'get',a);
 c.send(d||null)
}

有关ajax功能的更多信息

https://stackoverflow.com/a/18309057/2450730

HTML

<form id="form">
Date of Broadcast:
<input type='date' name='archive_date' required>
Show Descripton (optional):<br>
<textarea rows='4' cols='50' name='description'>
<input type="file" name="file1" accept="audio/mp3"><br>
</form>

多个文件

<input type="file" name="file[]" accept="audio/mp3" multiple>

JS

function fu(){alert('upload finished')}

window.onload=function(){
 var form=document.getElementById('form');
 form.onsubmit=function(e){
  e.preventDefault()
  ajax('include/file_upload_parser.php',fu,'post',new FormData(this));
  //or
  //ajax('include/file_upload_parser.php',fu,'post',new FormData(form));
 }
}

这会发送整个表格。

正如您所看到的，没有必要为formdata＆amp;编写这个长代码。 ajax +你可以将ajax函数重用于其他东西。

修改

具有进度处理程序的ajax函数。 f =上传g =下载

function ajax(a,b,e,d,f,g,c){ c=new XMLHttpRequest; !f||(c.upload.onprogress=f); !g||(c.onprogress=g); c.onload=b; c.open(e||'get',a); c.send(d||null) }

所以

ajax('include/file_upload_parser.php',fu,'post',new FormData(form),progressHandler);

使用document.getElementById附加formdata

2 个答案: