2013-01-11 34 views
0

我已經創建了一個窗體來發送數據和文件與jQuery的Ajax。 這段代碼與firefox分叉,但上載在chrome和其他瀏覽器中不起作用。上傳文件和數據jQuery

這是我的代碼: 的HTML

<form method="post" enctype="multipart/form-data" id="form_foto"> 
<table> 
<tr> 
    <td class="form_label"> 
     <label for="nome">Nome</label> 
    </td> 
    <td class="form_input"> 
     <input type="text" name="nome" value="" id="nome" /> 
    </td> 
</tr> 
<tr> 
    <td class="form_label"> 
     <label for="cognome">Cognome</label> 
    </td> 
    <td class="form_input"> 
     <input type="text" name="cognome" value="" id="cognome" /> 
    </td> 
</tr> 
<tr> 
    <td class="form_label"> 
     <label for="email">Email</label> 
    </td> 
    <td class="form_input"> 
     <input type="text" name="email" value="" id="email" /> 
    </td> 
</tr> 
<tr> 
    <td class="form_label"> 
     <label for="personaggio">Personaggio</label> 
    </td> 
    <td class="form_input"> 
     <input type="text" name="personaggio" value="" id="personaggio" /> 
    </td> 
</tr> 
<tr> 
    <td class="form_label"> 
     <label class="form_label_upload" for="file">UPLOAD FOTO</label> 
    </td> 
    <td class="form_input"> 
     <div class="porel"> 
    <span class="file-wrapper"> 
     <input type="file" name="file-0" id="file" /> 
     <span class="button"></span> 
    </span> 
     </div> 
    </td> 
</tr> 
<tr> 
<td colspan="2"> 
<div class="footer_dialog"> 
<p><input type="submit" id="submit_form" value="" /></p> 

JS代碼:

(function ($) { 
$.performAjaxSubmit = function() { 

     var nome = document.getElementById("nome").value; 
     var cognome = document.getElementById("cognome").value; 
     var email = document.getElementById("email").value; 
     var personaggio = document.getElementById("personaggio").value; 
     var exist = document.getElementById("exist").value; 
     var fb_id = document.getElementById("fb_id").value; 
     var first_name = document.getElementById("first_name").value; 
     var last_name = document.getElementById("last_name").value; 

     emailExp = /^[^\s()<>@,;:\/][email protected]\w[\w\.-]+\.[a-z]{2,}$/i; 

     if (nome.length == 0) { 
      $("div.errore").html("Inserisci il nome"); 
      return false; 
     } 

     if (cognome.length == 0) { 
      $("div.errore").html("Inserisci il cognome"); 
      return false; 
     } 

     if (personaggio.length == 0) { 
      $("div.errore").html("Inserisci il personaggio"); 
      return false; 
     } 
     if (email.length == 0 || !emailExp.test(email)) { 
      $("div.errore").html("Inserisci l'email"); 
      return false; 
     } 

     var formdata = new FormData(); 
     formdata.append("nome", nome); 
     formdata.append("cognome", cognome); 
     formdata.append("email", email); 
     formdata.append("personaggio", personaggio); 

     var dim = $('input[type="file"]').length; 
     for(j=0;j<dim;j++){ 
      $each($('input[type="file"]')[j].files, function(i, file) { 
       formdata.append('file-'+j, file); 
      }); 
     } 


     var xhr = new XMLHttpRequest(); 
     xhr.open("POST","index.php/upload/index_upload", true); 
     xhr.send(formdata); 
     $("div#dialog_content").html("<img src='<?php echo base_url(); ?>asset/public/images/loading.gif'/>"); 
     xhr.onload = function(e) { 
      if (this.status == 200) { 
       $("div#dialog_content").html(this.responseText); 
       //alert(this.responseText); 
      } 
      else{ 
       alert(this.responseText); 
      } 
     }; 
    }; 

工程與Firefox好,在Chrome和Safari有問題。 有什麼想法?

我怎樣才能發送數據和文件與AJAX? 我把代碼從本文

https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects#Creating_a_FormData_object_from_scratch

+0

我會建議你放棄這一點,並使用插件像http://malsup.com/jquery/form/ – Colleen

+0

'$每個($('輸入[type =「file」]')[j] .files,function(i,file){'should be'$ .each($('input [type =「file」]')[j] .files,function (i,file){''注意''''後'''' – Musa

回答

0

通過在Internet Explorer「Ajax」的上傳文件的唯一方法是使用I幀,而其他瀏覽器都支持通過AJAX上傳。你最好的辦法是使用一個插件,就像建議的那樣。

就個人而言,我使用jQuery表單插件http://malsup.com/jquery/form/