Problème avec AJAX Upload Script dans mvc

Question

J'ai trouvé ce script d'upload de fichier ajax ici http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

qui est censé ajouter des fonctionnalités ajax à mon dossier sous forme de téléchargement

<div id="dialog" title="Upload Image"> 
      <% 
      Html.BeginForm("Upload", "BugTracker", FormMethod.Post,new { id="uploadForm", enctype = "multipart/form-data"}); 
      %> 

       Select a file: <input type="file" name="file" id="file" /> 
       <h6>Upload a screenshot related to the ticket</h6> 
       <input type="submit" class="button" value="Upload" id="upload" onclick="uploadImage();" name="submit" /> 


      <%Html.EndForm();%> 
</div> 

Et je l'ai mis en place une fonction être appelé quand mon formulaire de téléchargement est présenté comme ceci:

function uploadImage() { 

    var action = $("#uploadForm").attr('action'); 

    $.ajaxFileUpload({ 
     url: action, 
     secureuri: false, 
     fileElementId: 'file', 
     dataType: 'json', 
     success: function (data, status) { 
      $("#RelatedFileName").val() = data.FileName; 
      $("#dialog").dialog("close"); 
     } 
    }); 
    return false; 
}  

mais il saute juste au-dessus de la fonction de rappel de succès, et le navigateur demande si je voudrais Downl oad le fichier json. Voici un coup d'oeil à mon action de téléchargement:

[HttpPost] 
     public ActionResult Upload(HttpPostedFileBase file) 
     { 
      Regex imageFilenameRegex = new Regex(@"(.*?)\.(jpg|jpeg|png|gif)$"); 
      if (file != null) 
      { 
       if (!imageFilenameRegex.IsMatch(file.FileName)) 
       { 
        return JavaScript("alert('invalid file. you must upload a jpg, jpeg, png, or gif');"); 
       } 
       else 
       { 
        string filePath = Path.Combine(HttpContext.Server.MapPath("~/Uploads"), Path.GetFileName(file.FileName)); 
        file.SaveAs(filePath); 

        return Json(new { FileName = "/Uploads/" + file.FileName }); 
       } 
      } 
      else 
      { 
       return JavaScript("alert('seriously? select a file to upload before hitting the upload button.');"); 
      } 
     } 

Je l'ai utilisé jQuery.post et il frappera l'action du contrôleur, mais le fichier sera nul, mais au moins les erreurs sauterait dans leurs boîtes d'alerte, de sorte que est pourquoi j'ai cherché une autre option. Maintenant, il frappe l'action du contrôleur et le fichier est téléchargé, mais il ne gère aucune réponse. Toute aide est appréciée.

Answer 1

Le plugin que vous utilisez comme réponse text/html attend contenu type même si vous passez JSON. Donc, si vous voulez vraiment l'utiliser, vous devez faire ceci:

return Content("{ FileName: '/Uploads/' }", "text/html"); 

Comme vous le savez, c'est de la merde.

Alors allez-y et téléchargez le jquery form plugin. C'est beaucoup plus facile à utiliser. Vous n'avez rien à faire dans votre HTML, c'est totalement discret. Il suffit de laisser la forme comme il est et javascript simplement:

$(function() { 
    // Only indicate the form id, it will take care of reading the form action, 
    // returning false, ..., all you need is to concentrate 
    // on the success callback 
    $('#uploadForm').ajaxForm(function(result) { 
     alert(result); 
    }); 
}); 

Notez également qu'en cas d'erreur, vous ne devriez pas retourner Javascript. Vous devez toujours renvoyer Json depuis votre action de contrôleur. Ainsi, en cas d'erreur:

return Json(new { errorMessage = "Kaboom", fileName = "" }); 

et en cas de succès:

return Json(new { errorMessage = "", fileName = "/Uploads/" + file.FileName }); 

maintenant vous pouvez vérifier s'il y a une erreur en examinant la propriété errorMessage sur l'objet JSON retourné:

$('#uploadForm').ajaxForm(function(result) { 
    if (result.errorMessage != '') { 
     alert(result.errorMessage); 
    } else { 
     $('#RelatedFileName').val(result.fileName); 
     $('#dialog').dialog('close'); 
    } 
}); 

Answer 2

Si vous voulez faire des ajax uploads, vous allez vouloir faire le formulaire de téléchargement dans un iframe.

Voir: http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

Answer 3

Il est également possible de définir le type de contenu ici:

return Json(new { FileName = "/Uploads/filename.ext" }, "text/html", JsonRequestBehavior.AllowGet);