Problème de téléchargement asynchrone à l'aide de jquery.form.js

Question

J'utilise le plugin jquery.form pour télécharger de manière asynchrone des documents dans un projet MVC.

Prendre mon avance de this réponse précédente, voici ce que j'ai sur la page:

<% using(Html.BeginForm("Create", "JobFile", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" })) %> 
<% { %> 
<%: Html.ValidationSummary() %> 

    <input type="file" id="fileToUpload" /> 
    <input type="submit" value="Upload file" /> 
    <input type="text" id="RelatedFileName" /> 

<% } %> 

<script type="text/javascript" src="../../Scripts/jquery-1.4.1.min.js"></script> 
<script type="text/javascript" src="../../Scripts/jquery.form.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#uploadForm').ajaxForm(function (result) { 
      if (result.errorMessage != '') { 
       alert(result.errorMessage); 
      } else { 
       $('#RelatedFileName').val(result.fileName); 
      } 
     }); 
    }); 
</script> 

Mon problème est que quand la page se charge je reçois l'erreur javascript suivant:

Uncaught TypeError: Object # has no method 'ajaxForm'

Cette erreur se trouve sur la ligne contenant

$('#uploadForm').ajaxForm(function (result) { 

Quelqu'un peut-il me dire pourquoi je reçois cette erreur?

Answer 1

Est-ce que 'uploadForm' est l'ID de votre objet <form>? Si c'est le cas, vous pouvez vérifier quelque chose comme FireBug pour vous assurer que votre plug-in est correctement inclus sur votre page.

Answer 2

Le raccourci:

$(function() { 

ne fonctionne pas dans toute dernière version de jQuery, doivent utiliser:

$(document).ready(function() { 

Answer 3

Voici la méthode que je me sers pour MVC3, CodeIgniter et Yû. important est ce que votre devrait spécifier method = "post", enctype et encoding = "multipart/form-data"

var submitForm = function(_formId){ 
var _genMsg = $('#genMsg'); 
_submitForm = $('form').index($('#'+_formId)); 
if(subCommonForm(_submitForm, 'main')){ 
    _genMsg.attr('class', 'information-box round'); 
    _genMsg.html('Saving...'); 
    $('#'+_formId).ajaxForm({ 
     dataType: 'json', 
     success: function (data) { 
      _genMsg.attr('class', 'information-box round'); 

      data.code == 0 
       ? _genMsg.attr('class', 'confirmation-box round') 
       : _genMsg.attr('class', 'error-box round'); 

      _genMsg.html(data.message); 
      _genMsg.fadeIn(); 
     } 
    }); 

    $('#'+_formId).submit(); 
} 
}; 

Answer 4

Vérifiez que jquery n'est pas inclus dans la page deux fois.

Answer 5

vérifier si vous avez la $

$('#your-form')

et non

('#your-form')