傳遞文件從Javascript上傳到PHP

我正在處理腳本，讓用戶上傳文件並看到上傳狀態，然後將文件保存在服務器上。傳遞文件從Javascript上傳到PHP

問題是我不能使用php api。所以我想用JavaScript上傳文件，我可以很容易地獲得上傳狀態，但是我想將文件傳遞給php並保存。

這可能嗎？

這是要上傳的JavaScript代碼。

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

來源

2012-09-21 Sharpless

謝謝！正是我需要的。現在SSL ... – reuns

做一個AJAX請求的PHP文件，發送類似名稱等上傳的文件屬性，讓它打開，移動的是，重命名或任何需要。它應該工作，是吧？

我理解了你的問題嗎？

示例代碼：

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

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

來源

2012-09-21 12:25:49 Mahdi

你有一個示例代碼，所以它更容易理解我 – Sharpless

@Sharpless我已經更新了答案，希望有所幫助！ :) – Mahdi

我對此有Gist。它使用xhr.send(FormData)並顯示最小代碼來處理PHP中的文件。

來源

2012-09-21 16:30:32 ebidel

傳遞文件從Javascript上傳到PHP

回答

相關問題