I have cgi for upload files, when I use the <form>
to upload files, it works great, but it doesn't work if I use ajax to send data......
The form is like this:
<form id="confUpdate" enctype="multipart/form-data" method="post" action="upload.cgi">
<input id='upLoad' type='file' name="file">
<input id='btnUpload' type="submit" name="send" value="Upload">
</form>
It can work if I just let the button type='submit'.
When I change the type of button 'submit' to 'button', and try javascript:
window.onload=function(){
var upfile=document.getElementById("upLoad");
var upform=document.getElementById("confUpdate");
var btnUpload=document.getElementById("btnUpload");
var info=document.getElementById("InfoText");
var xhr;
btnUpload.onclick=function(){
var file=upfile.files;
var formData=new FormData();
if(file[0].name.split(".")[1]!="bin"){
info.innerHTML="The file should be .bin file.";
}else{
info.innerHTML="";
formData.append("file",file[0],file[0].name);
}
if (window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
try{
xhr.open('POST', 'upload.cgi', true);
xhr.setRequestHeader("content-type","multipart/form-data");
xhr.onreadystatechange = onReceive;
xhr.send(formData);
}catch(e){
xhr.abort();
}
}
function onReceive(){
var xml;
var elem;
if(xhr.readyState==4){
if(xhr.status==200){
xml=xhr.responseText;
info.innerHTML="Uploaded:"+xml;
}else{
info.innerHTML="Something is error.";
}
}
}
}
After I clicking the button, the debug text is show 'Uploaded:', means it's send the file data, but the xml( content of the respond by server side) is empty.
I'm not sure it's my server side error or my javascript side error?
I guess the file should be name='file'.
Any advice will be appreciated!
I found what's wrong!
I check the api of the upload, and found that I need to send the name of the button, too!
So the ajax is now:
var upfile=document.getElementById("upfile");
var upform=document.getElementById("upform");
var btnUpload=document.getElementById("btnUpload");
var info=document.getElementById("InfoText");
var xhr;
upform.onsubmit = function(event){
event.preventDefault();
info.innerHTML="";
var files=upfile.files;
var formData=new FormData();
if(files[0].name.split(".")[1]!="bin"){
info.innerHTML="The file should be .bin file.";
}else{
info.innerHTML="Uploading, please wait.";
formData.append("file",files[0],files[0].name);
formData.append("send","Send");
if (window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
try{
xhr.open('POST', 'upload.cgi', true);
//xhr.setRequestHeader("Content-Type","multipart/form-data");
xhr.onreadystatechange = onReceive;
xhr.send(formData);
}catch(e){
xhr.abort();
}
}
}
function onReceive(){
var xml;
var elem;
if(xhr.readyState==4){
if(xhr.status==200){
xml=xhr.responseText;
info.innerHTML="Uploaded:"+xml;
}else{
info.innerHTML="Something is error.";
}
}
}
I'm so foolish~ Who knows that the name of button is important when I upload a file?
And thanks to all for giving me any advices!