Przełóż plik z JavaScript przesłać do PHP

Pracuję nad skryptem, który pozwala użytkownikowi przesłać plik i widzi stan przesyłania, a plik jest następnie zapisywany na serwerze.Przełóż plik z JavaScript przesłać do PHP

Problem polega na tym, że nie mogę korzystać z php api. Tak więc pomyślałem, aby przesłać plik z javascript, gdzie mogę łatwo uzyskać status przesyłania, ale potem chcę przekazać plik do php i zapisać go.

Czy to możliwe?

To jest kod javascript do przesłania.

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

Źródło

2012-09-21 Sharpless

Dziękujemy! dokładnie to, czego potrzebowałem. teraz SSL ... – reuns

Złóż wniosek AJAX do pliku PHP, wysłać wrzucone właściwości pliku, takie jak nazwa, itp i niech to otwarcie, że pojedynek, zmiana nazwy, które albo cokolwiek potrzebne. To powinno działać, co?

Czy poprawnie zrozumiałem twoje pytanie?

Przykładowy kod:

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

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

Źródło

2012-09-21 12:25:49 Mahdi

Masz przykładowy kod, więc łatwiej mi go zrozumieć – Sharpless

@Sharpless Zaktualizowałem odpowiedź, mam nadzieję, że pomoże! :) – Mahdi

Mam Gist w tej sprawie. Używa ona xhr.send(FormData) i pokazuje minimalny kod do obsługi pliku w PHP.

Źródło

2012-09-21 16:30:32 ebidel

Przełóż plik z JavaScript przesłać do PHP

Odpowiedz

Powiązane problemy