загрузить файл с помощью 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/'); 
      } 
    } 

Это не работает .Can кто-нибудь помочь мне в этом? Он не приходит в upload.php и дает мне ошибку Illegal Invocation.

Спасибо, Shirish

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") ; }) ; 


} 
});