Pasar archivo desde Javascript cargar a PHP

Estoy trabajando en un script para permitir que el usuario cargue un archivo y vea un estado de carga y luego el archivo se guarda en el servidor.Pasar archivo desde Javascript cargar a PHP

El problema es que no puedo usar la API de php. Así que estaba pensando en subir el archivo con javascript, donde puedo obtener fácilmente el estado de carga, pero luego quiero pasar el archivo a php y guardarlo.

¿Esto es posible?

Este es el código de javascript para cargar.

<!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>

Fuente

2012-09-21 Sharpless

¡Gracias! exactamente lo que necesitaba ahora SSL ... – reuns

Hacer una petición AJAX a un archivo PHP, enviar las propiedades de los archivos subidos como nombre, etc., y deje que se abra esa, que se mueven, cambiar el nombre o lo que sea necesario. Debería funcionar, ¿eh?

¿Entendí bien tu pregunta?

Código de ejemplo:

en 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);

En 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 ...

Fuente

2012-09-21 12:25:49 Mahdi

Tiene un código de ejemplo, por lo que es más fácil de entender para mí – Sharpless

@Sharpless He actualizado la respuesta, ¡espero que ayude! :) – Mahdi

Tengo una Gist en esto. Utiliza xhr.send(FormData) y muestra el código mínimo para manejar el archivo en PHP.

Fuente

2012-09-21 16:30:32 ebidel

Pasar archivo desde Javascript cargar a PHP

Respuesta

Cuestiones relacionadas