2017-04-12 1 views
1

Ich habe diese HTML, die die Datei auf den Server hochladen muss, dann mit einem anderen PHP verarbeiten und schließlich die Datei wieder auf dem HTML-Div verfügbar machen, ich lese auf Ajax Erfolg Anrufe, die ich kann jede Funktion verschachteln, aber da ich neu in der JQuery- und AJAX-Funktion bin, weiß ich wirklich nicht, wie das funktioniert ... Im folgenden Beispiel kann ich nur Funktionen mit Schaltflächen aufrufen und keine AJAX-Erfolgsaufrufe ...Ajax Erfolg nächste Funktion

<html> 

<head> 

</head> 

<body> 
<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 


function uploadFile(){ 
    var file = document.getElementById("file").files[0]; 
    // alert(file.name+" | "+file.size+" | "+file.type); 
    var formdata = new FormData(); 
    formdata.append("file", file); 
    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", "upload.php"); 
    ajax.send(formdata); 
} 
function progressHandler(event){ 
    document.getElementById("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total; 
    var percent = (event.loaded/event.total) * 100; 
    document.getElementById("progressBar").value = Math.round(percent); 
    document.getElementById("status").innerHTML = Math.round(percent)+"% uploaded... please wait"; 


} 
function completeHandler(event){ 
    document.getElementById("status").innerHTML = event.target.responseText; 
    document.getElementById("progressBar").value = 0; 
} 
function errorHandler(event){ 
    document.getElementById("status").innerHTML = "Upload Failed"; 
} 
function abortHandler(event){ 
    document.getElementById("status").innerHTML = "Upload Aborted"; 
} 

function drive(){ 

var driver= new XMLHttpRequest(); 

driver.open("GET","drive.php",true); 

driver.onreadystatechange= function(){ 
if(driver.readyState== 4 && driver.status == 200) 
{ 

document.getElementById("response").innerHTML = driver.responseText; 


} 



} 

driver.send(); 

} 
function download(){ 

var download= new XMLHttpRequest(); 

download.open("GET","download.php",true); 

download.onreadystatechange= function(){ 
if(download.readyState== 4 && download.status == 200) 
{ 

document.getElementById("download").innerHTML = download.responseText; 


} 



} 

download.send(); 

} 








$.fn.YourName=function(){ 

uploadFile(); 
} 

$.fn.drive=function(){ 

drive(); 

} 



$(document).ready(function(){ 
    $("#upload").click(function(){ 

     uploadFile(); 

     $.ajax({url: "upload.php", success: function(result){ 

     $.ajax({url: "drive.php", success: function(result){ 
      download(); 

     }}); 

     }}); 
    }); 
}); 

</script> 






<form id="upload_form" enctype="multipart/form-data" method="post"> 
    <input type="file" name="file" id="file"><br> 
    <input type="button" id="upload" value="upload File"> 
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> 
    <h3 id="status"></h3> 
    <p id="loaded_n_total"></p> 
</form> 

<div id="response"></div> 
<div id="download"></div> 


</body> 



</html> 
+0

was bedeutet 'drive.php' und' download.php' tatsächlich zurückkehren? –

Antwort

0
$(document).ready(function(){ 
$("#upload").click(function(){ 

     uploadFile(); 

     $.ajax({url: "upload.php", success: function(result){ 

     $.ajax({url: "drive.php", success: function(result){ 
      download(); 

     }}); 

     }}); 
    }); 
}); 
Verwandte Themen