Passare il file da Javascript caricare su PHP

Sto lavorando a uno script per consentire all'utente di caricare un file e vedere uno stato di caricamento e il file viene quindi salvato sul server.Passare il file da Javascript caricare su PHP

Il problema è che non posso usare php api. Quindi stavo pensando di caricare il file con javascript dove posso facilmente ottenere lo stato di caricamento, ma poi voglio passare il file a php e salvarlo.

È possibile?

Questo è il codice javascript da caricare.

<!DOCTYPE html> 
<html> 
<head > 
<title>Upload Files using XMLHttpRequest</title> 

<script type="text/javascript"> 
    function fileSelected() { 
     var file = document.getElementById('fileToUpload').files[0]; 
     if (file) { 
      var fileSize = 0; 
      if (file.size > 1024 * 1024) 
       fileSize = (Math.round(file.size * 100/(1024 * 1024))/100).toString() + 'MB'; 
      else 
       fileSize = (Math.round(file.size * 100/1024)/100).toString() + 'KB'; 

      document.getElementById('fileName').innerHTML = 'Name: ' + file.name; 
      document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize; 
      document.getElementById('fileType').innerHTML = 'Type: ' + file.type; 
     } 
    } 

    function uploadFile() { 
     var fd = new FormData(); 
     fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 
     var xhr = new XMLHttpRequest(); 
     xhr.upload.addEventListener("progress", uploadProgress, false); 
     xhr.addEventListener("load", uploadComplete, false); 
     xhr.addEventListener("error", uploadFailed, false); 
     xhr.addEventListener("abort", uploadCanceled, false); 
     xhr.open("POST", "UploadHandler.ashx"); 
     xhr.send(fd); 
    } 

    function uploadProgress(evt) { 
     if (evt.lengthComputable) { 
      var percentComplete = Math.round(evt.loaded * 100/evt.total); 
      document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; 
      document.getElementById('prog').value = percentComplete; 
     } 
     else { 
      document.getElementById('progressNumber').innerHTML = 'unable to compute'; 
     } 
    } 

    function uploadComplete(evt) { 
     /* This event is raised when the server send back a response */ 
     alert(evt.target.responseText); 
    } 

    function uploadFailed(evt) { 
     alert("There was an error attempting to upload the file."); 
    } 

    function uploadCanceled(evt) { 
     alert("The upload has been canceled by the user or the browser dropped the connection."); 
    } 
</script> 

</head> 
<body> 
    <form id="form1"> 
    <div> 
     <label for="fileToUpload"> 
      Select a File to Upload</label> 
     <input type="file" name="fileToUpload[]" id="fileToUpload" onchange="fileSelected();" /> 
    </div> 
    <div id="fileName"> 
    </div> 
    <div id="fileSize"> 
    </div> 
    <div id="fileType"> 
    </div> 
    <div> 
     <input type="button" onclick="uploadFile()" value="Upload" /> 
    </div> 
    <div id="progressNumber"> 
    </div> 
    <progress id="prog" value="0" max="100.0"></progress> 
    </form> 
</body> 
</html>

fonte

2012-09-21 Sharpless

Grazie! esattamente wam ho bisogno. ora SSL ... – reuns

Fai una richiesta AJAX in un file PHP, inviare le proprietà del file caricato come nome, ecc e lasciarlo aperto che, mossa che, rinominare o qualsiasi altra cosa che necessario. Dovrebbe funzionare, eh?

ho capito correttamente la tua domanda?

codice di esempio:

in JavaScript:

// xhr 
var http = new XMLHttpRequest(); 
var url = "file_handler.php"; 
var file_data = "name=mypic.jpg&size=123&othe=etc"; 
http.open("POST", url, true); 

// headers 
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
http.setRequestHeader("Content-length", file_data.length); 
http.setRequestHeader("Connection", "close"); 

http.onreadystatechange = function() { 
    if(http.readyState == 4 && http.status == 200) { 
     alert(http.responseText); 
    } 
} 

http.send(file_data);

In file_handler.php:

// file data 
$file_data = $_POST['file_data']; 

// working on the file 
$temp_dir = 'usr/upload/'; 
$new_dir = 'usr/photos/'; 

// new unique name 
$new_name = time() . '_' . $file_data['name']; 

// copy? 
if (copy($temp_dir . $file_data['name'], $new_dir . $new_name)) { 
    unlink($temp_dir . $file_data['name']); 
} 

// rename? 
rename($temp_dir . $file_data['name'], $temp_dir . $new_name); 

// delete old file? 
unlink($temp_dir . $file_data['name']); 

// do whatever else needed here ... 
// echo some JSON data to interact with your client-side JS code, maybe ...

fonte

2012-09-21 12:25:49 Mahdi

Hai un codice di esempio, quindi è più facile da capire per me – Sharpless

@Sharpless Ho aggiornato la risposta, spero che sia di aiuto! :) – Mahdi

Ho un Gist su questo. Utilizza xhr.send(FormData) e mostra il codice minimo per gestire il file in PHP.

fonte

2012-09-21 16:30:32 ebidel

Passare il file da Javascript caricare su PHP

risposta

Problemi correlati