2012-04-12 4 views
1

Kann nicht dazu kommen, etwas zu tun. Wenn ich auf "Datei hochladen" klicke, geschieht absolut nichts so gut, wie ich den Flash auf dem Bildschirm nicht sehen kann. Ich glaube, das hängt irgendwie mit der JQuery zusammen, aber ich bin mir nicht sicher. Bitte helfen! Wenn jemand mir eine einfache VS2010-Lösung mit uplofy schicken kann, die zu infinitimods bei gmail.com arbeitet, die wirklich funktioniert, würde ich noch mehr schätzen! Vielen Dank!Uploadify in MVC3 funktioniert nicht

My Layout file: 

    <!DOCTYPE html> 
    <html> 
    <head> 
     <title>@ViewBag.Title</title> 
     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
     <link type="text/css" rel="Stylesheet" media="screen" href="/Scripts/uploadify/uploadify.css" /> 
     <script type="text/javascript" src="/Scripts/uploadify/swfobject.js"></script> 
     <script type="text/javascript" src="/Scripts/uploadify/jquery.uploadify.v2.1.4.min.js"></script> 
     <script type="text/javascript" src="/Scripts/uploadify/jquery-1.4.2.min.js"></script> 
    </head> 

    <body> 
     @RenderBody() 
    </body> 
    </html> 



My index file: 

    @{ 
     ViewBag.Title = "Index"; 
     Layout = "~/Views/Shared/_Layout.cshtml"; 
    } 

    <h2>Index</h2> 

    @using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) 
    {   
     <script type="text/javascript"> 
      $(document).ready(function() { 

       $("#file_upload").uploadify({ 
        'uploader': '~/Scripts/uploadify/uploadify.swf', 
        'cancelImg': '~/Scripts/uploadify/images/cancel.png', 
        'buttonText': 'Upload foto', 
        'script': '/Home/UploadFiles', 
        'folder': '/Content/upload', 
        'fileDesc': 'Image Files', 
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png; *.txt;', 
        'scriptData': { 'thisGuid': $("input#Id").val() }, 
        'multi': false, 
        'auto': true, 
        'onError': function (event, queueID, fileObj, errorObj) { 
         alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]"); 
        }    
       }); 

       $("#btnSave").button().click(function (event) { 
        $('#file_upload').uploadifyUpload(); 
       }); 


      }); 

     </script> 

     <input id="file_upload" type="file" /> 

     <input type="button" id="btnSave" value="Upload file" /> 

     <input id="Id" name="Id" type="hidden" value="5168e-yada-yada" /> 
    } 

My controller: 

public class HomeController : Controller 
{ 
    /// <summary> 
    /// 
    /// </summary> 
    /// <returns></returns> 
    [HttpGet] 
    public ActionResult Index() 
    { 
     return View("Index"); 
    } 

    /// <summary> 
    /// 
    /// </summary> 
    /// <param name="fileData"></param> 
    /// <param name="form"></param> 
    /// <returns></returns> 
    [HttpPost] 
    public string UploadFile(HttpPostedFileBase fileData, FormCollection form) 
    { 
     return "ok"; 
    } 
} 

Antwort

1

Uploadify erfordert jQuery. Das bedeutet, dass Sie das jQuery-Skript vor dem Skript uplofy einbinden müssen. Wenn Sie in Ihrer JavaScript-Debugging-Konsole gesucht hätten, hätten Sie diesen Fehler gesehen.

So, das Layout:

<!DOCTYPE html> 
<html> 
<head> 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("~/Scripts/uploadify/uploadify.css")" type="text/css" rel="stylesheet" media="screen" /> 
    <script type="text/javascript" src="@Url.Content("~/Scripts/uploadify/swfobject.js")"></script> 
    <script type="text/javascript" src="@Url.Content("~/Scripts/uploadify/jquery-1.4.2.min.js")"></script> 
    <script type="text/javascript" src="@Url.Content("~/Scripts/uploadify/jquery.uploadify.v2.1.4.min.js")"></script> 
</head> 

<body> 
    @RenderBody() 
</body> 
</html> 

Der Controller:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult UploadFile(HttpPostedFileBase fileData, string thisGuid) 
    { 
     if (fileData != null && fileData.ContentLength > 0) 
     { 
      var appData = Server.MapPath("~/app_data"); 
      var file = Path.Combine(appData, Path.GetFileName(fileData.FileName)); 
      fileData.SaveAs(file); 
     } 
     return Json(new { status = true }); 
    } 
} 

und die Aussicht:

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#file_upload').uploadify({ 
      'uploader': '@Url.Content("~/Scripts/uploadify/uploadify.swf")', 
      'cancelImg': '@Url.Content("~/Scripts/uploadify/images/cancel.png")', 
      'buttonText': 'Select photo', 
      'script': $('form').attr('action'), 
      'fileDesc': 'Image Files', 
      'fileExt': '*.jpg;*.jpeg;*.gif;*.png; *.txt;', 
      'multi': false, 
      'auto': false, 
      'onError': function (event, queueID, fileObj, errorObj) { 
       alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]"); 
      } 
     }); 

     $('form').submit(function() { 
      $('#file_upload').uploadifySettings('scriptData', { thisGuid: $('#id').val() }); 
      $('#file_upload').uploadifyUpload(); 
      return false; 
     }); 
    }); 
</script> 


<h2>Index</h2> 

@using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{   
    <input id="id" name="id" type="hidden" value="5168e-yada-yada" /> 
    <input id="file_upload" type="file" name="fileData" /> 
    <input type="submit" value="Upload file" /> 
} 

Und wenn Sie den Upload-Prozess zu treten, wenn der Benutzer auswählt Mit einem Foto können Sie das Formular und die Senden-Schaltfläche loswerden und die Eigenschaft auto aufsetzen:

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#file_upload').uploadify({ 
      'uploader': '@Url.Content("~/Scripts/uploadify/uploadify.swf")', 
      'cancelImg': '@Url.Content("~/Scripts/uploadify/images/cancel.png")', 
      'buttonText': 'Select photo', 
      'script': $('form').attr('action'), 
      'fileDesc': 'Image Files', 
      'fileExt': '*.jpg;*.jpeg;*.gif;*.png; *.txt;', 
      'multi': false, 
      'auto': true, 
      'scriptData': { thisGuid: $('#id').val() }, 
      'onError': function (event, queueID, fileObj, errorObj) { 
       alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]"); 
      } 
     }); 
    }); 
</script> 


<h2>Index</h2> 

<input id="id" name="id" type="hidden" value="5168e-yada-yada" /> 
<input id="file_upload" type="file" name="fileData" /> 

Vergessen Sie auch nicht die uploadify documentation besser zur Kasse zu verstehen, was die verschiedenen Optionen für die verwendet werden und auch können Sie einige Beispiele sehen.