1. ホーム
  2. 質問と答え
  3. MVC3でUploadifyが動作しない

MVC3でUploadifyが動作しない

2012-04-12 15 views
1

何もすることができません。私が「ファイルをアップロード」をクリックすると、何も起こらず、画面にレンダリングされたフラッシュも表示されません。私はこれが何とかjqueryに関係していると信じていますが、わかりません。助けてください！誰かが私にメールを送ることができれば、実際に動作するgmail.comのinfinitimodsにアップロードされた簡単なVS2010ソリューションがあれば、さらに感謝します！本当にありがとう！MVC3でUploadifyが動作しない

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

出典

2012-04-12 user1322549

答えて

1

UploadifyはjQueryのを必要とします。つまり、アップロードスクリプトの前にjQueryスクリプトを含める必要があります。あなたがjavascriptのデバッグコンソールを見ていたら、このエラーが発生しているはずです。

ので、レイアウト：

<!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>

コントローラ：

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

とビュー：

@{ 
    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" /> 
}

そして、あなたがアップロード処理をキックしたい場合はときに、ユーザーが選択しますあなたはフォームとサブミットボタンを取り除き、autoプロパティをに設定した写真：

@{ 
    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" />

もuploadify documentationが良いのさまざまなオプションが使用され、また、あなたはいくつかの例を見ることができるかを理解するためにチェックアウトすることを忘れないでください。

出典

2012-04-12 06:25:33

関連する問題

 関連する問題