使用ajax，jquery，php上傳文件

Question

我想上傳文件併發送到服務器而不刷新頁面。

我有以下線在我的HTML文件

<form id="FileUploader" enctype="multipart/form-data" > 
    <input type="file" name="mfile" id="mfile" style='width:100%;' onchange="uploaded()"> 
</form> 

function uploaded() 
    { 
     alert($('form#FileUploader')[0]); 
     var formData=new FormData($('form#FileUploader')[0]); 
     //alert(formData); 
      $.ajax({ 
      url: "<?php echo $_SESSION['webpage']."/upload" ?>", 
      type: "POST", 
      async: true, 
      dataType: "JSONP", 
      data : formData 
      }) 
      .success (function(response){ 
       alert(response); 
      }) 
      .error (function()  { alert("Error") ; }) ; 


    } 

upload.php的文件

if ($_FILES["mfile"]["error"] >0) 
    { 
     echo "Error: " ; 
    } 
    else 
    { 
     if (file_exists("upload_email_files/" . $_FILES["mfile"]["name"])) 
      { 
      echo $_POST["file"]. " already exists. "; 
      } 
     else 
      { 
      $otp= move_uploaded_file('$_FILES["mfile"]"name"]','/../upload_templates/'); 
      } 
    } 

它不工作。可有人幫我在這？ 它不是在upload.php中，並給我錯誤非法調用。

感謝， 希裏什

Answer 1

在「沒有清爽頁面」的情況下，你可以使用隱藏的iframe 。

僅供參考，

http://viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/，

http://joekuan.wordpress.com/2009/06/12/ajax-a-simplified-version-of-file-upload-form-using-iframe/

Answer 2

檢查了這一點我沒有測試它希望這將工作http://blog.new-bamboo.co.uk/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata

<form id="FileUploader" enctype="multipart/form-data" > 
    <input type="file" name="mfile" id="mfile" style='width:100%;' onchange="uploaded()"> 
</form> 

function uploaded() 
    { 
     alert($('form#FileUploader')[0]); 
     var formData=new FormData($('form#FileUploader'));//remove [0] 
     //alert(formData); 
      $.ajax({ 
      url: "<?php echo $_SESSION['webpage']."/upload" ?>", 
      type: "POST", 
      //async: true,//Remove this line 
      //dataType: "JSONP",//Remove this line 
      data : formData 
      }) 
      .success (function(response){ 
       alert(response); 
      }) 
      .error (function()  { alert("Error") ; }) ; 


    } 

Answer 3

試試這個:)

<form id="FileUploader" enctype="multipart/form-data" > 
    <input type="file" name="mfile" id="mfile" style='width:100%;' onchange="uploaded()"> 
</form> 
$(document).ready(function() { 
$("#form-geninfo").submit(function(e) 
{ 
    e.preventDefault(); 
    alert($('form#FileUploader')[0]); 
    var formData=new FormData($('form#FileUploader')[0]); 
    //alert(formData); 
     $.ajax({ 
     url: "<?php echo $_SESSION['webpage']."/upload" ?>", 
     type: "POST", 
     async: true, 
     dataType: "JSONP", 
     data : formData 
     }) 
     .success (function(response){ 
      alert(response); 
     }) 
     .error (function()  { alert("Error") ; }) ; 


} 
});