2015-10-19 88 views
2

HTML代碼工作PHP是不是與阿賈克斯

<form method="post" name="file_upload" enctype="multipart/form-data" id="file_upload"> 
    <input type="file" id="_file" name="_file"> <br> 
    <input type="button" id="button" value="upload"/> <br> 
    <progress id="p_bar" value="0" max="100" style="width:300px;"> </progress> 
</form> 
<p id="status"> </p> 
<script src="final.js" > </script> 

JS

var sfile = document.getElementById('_file') ; 
var btn = document.getElementById('button') ; 
var f_upload= document.getElementById('file_upload') ; 
var pbar = document.getElementById('p_bar') ; 
var sbar = document.getElementById('status') ; 

function upload() { 
    if(sfile.files.length==0) { 
    alert("files isn't select ") ;      
    } 

    var s_file = sfile.files[0] ; 
    var formdata = new FormData() ; 
    formdata.append('selected file ',s_file) ; 

    var ajax = new XMLHttpRequest() ; 
    ajax.upload.addEventListener("progress", progress , false) ; 


    function progress (event) { 
     var percent = (event.loaded/event.total) * 100 ; 
     pbar.value = Math.round(percent) ; 
     sbar.innerHTML = Math.round(percent)+"%.........uploaded" ; 
    } 

    ajax.open("POST", "final.php") ; 
    ajax.send(formdata) ; 
} 


btn.addEventListener("click", upload , false) ;` 

PHP

<?php 

$file_name = $_FILES['_file']['name'] ; 
$file_temp = $_FILES['_file']['tmp_name'] ; 
$file_size = $_FILES['_file']['size'] ; 
$file_type = $_FILES['_file']['type'] ; 
$file_error = $_FILES['_file']['size'] ; 

$file_destination = "upload/".basename($file_name) ; 


if(move_uploaded_file($file_temp, $file_destination)) { 
    echo "file uploaded" ; 
} 
else { 
    echo " file is failed to upload " ; 
} 

在PHP的這些沒有工作。如果我只把回聲仍然不輸出在主頁面。此外,如果在PHP中,我們趕上了名稱標籤在HTML比爲什麼ajax.like ajax.send(FORMDATA)使用發送功能的

+0

您正在將'_file'輸入重命名爲'selected file' - >'formdata.append('selected file',s_file);',所以'$ _FILES ['_ file']'將爲空。這應該是'formdata.append('_file',s_file);' – Sean

+0

仍然不能正常工作 – leecarter

+0

一旦用發佈的腳本替換你的腳本並運行。 –

回答

1

這裏的問題是,你是不是在找ajax response。嘗試這樣的:

<script> 
    var sfile = document.getElementById('_file'); 
    var btn = document.getElementById('button'); 
    var f_upload= document.getElementById('file_upload'); 
    var pbar = document.getElementById('p_bar'); 
    var sbar = document.getElementById('status'); 
    var ajax = null; 
    function upload() { 
     if(sfile.files.length==0) { 
      alert("files isn't select "); 
      return; 
     } 

     var s_file = sfile.files[0]; 
     var formdata = new FormData(); 
     formdata.append('_file',s_file);//your key is _file 

     ajax = new XMLHttpRequest(); 
     ajax.upload.addEventListener("progress", progress , false); 
     ajax.open("POST", "final.php"); 
     ajax.onreadystatechange = OnStateChange; 
     ajax.send(formdata); 

    } 

    btn.addEventListener("click", upload , false); 

    function progress (event) { 
     var percent = (event.loaded/event.total) * 100; 
     pbar.value = Math.round(percent); 
     sbar.innerHTML = Math.round(percent)+"%.........uploaded"; 
    } 

    function OnStateChange() { 
     if (ajax.readyState == 4 && ajax.status == 200) { 
      var resp = ajax.responseText; 
      alert(resp); 
     } 
    } 
</script> 
+0

錯誤是:move_uploaded_file:複製()函數的第二個參數不能成爲目錄 – leecarter

+0

謝謝你現在的工作。爲什麼添加兩次if readystate,因爲它已經在onstatechange中運行了,爲什麼再次輸入ajax.send之後呢。 – leecarter

+0

對不起,這是一個錯誤。 –