2015-06-29 60 views
0

我用這個教程中我的web應用程序的MVC創建懸浮窗面積5爲什麼我的懸浮窗不能正常工作

http://www.codeproject.com/Articles/874215/File-upload-in-ASP-NET-MVC-using-Dropzone-JS-and-H

,但是當我拖放我的形象,懸浮窗佈局不工作。下面 是我的代碼:

_layout

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    @Styles.Render("~/Content/css") 
    @Styles.Render("~/Content/dropzonescss") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" }) 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li>@Html.ActionLink("Home", "Index", "Home")</li> 
        <li>@Html.ActionLink("About", "About", "Home")</li> 
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="container body-content"> 
     @RenderBody() 
     <hr /> 
     <footer> 
      <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
     </footer> 
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @Scripts.Render("~/bundles/dropzonescripts") 
    <script type="text/javascript"> 

     Dropzone.options.dropzoneJsForm = { 

      //prevents Dropzone from uploading dropped files immediately 
      autoProcessQueue: false, 

      init: function() { 
       var submitButton = document.querySelector("#submit-all"); 
       var myDropzone = this; //closure 

       submitButton.addEventListener("click", function() { 

        //tell Dropzone to process all queued files 
        myDropzone.processQueue(); 
       }); 

      } 
     }; 

    </script> 

    @RenderSection("scripts", required: false) 
</body> 
</html> 

指數

@{ 
    ViewBag.Title = "Home Page"; 
} 


<form action="~/Home/SaveUploadedFile" method="post" class="dropzone" id="Dropzone.options.dropzoneJsForm" > 
    <div class="fallback"> 
     <input name="file" type="file" multiple /> 
     <input type="submit" value="Upload" /> 
    </div> 
</form> 

的HomeController

public ActionResult SaveUploadedFile() 
{ 
    bool isSavedSuccessfully = true; 
    string fName = ""; 
    try 
    { 
     foreach (string fileName in Request.Files) 
     { 
      HttpPostedFileBase file = Request.Files[fileName]; 
      //Save file content goes here 
      fName = file.FileName; 
      if (file != null && file.ContentLength > 0) 
      { 

       var originalDirectory = new DirectoryInfo(string.Format("{0}Images\\WallImages", Server.MapPath(@"\"))); 

       string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "imagepath"); 

       var fileName1 = Path.GetFileName(file.FileName); 

       bool isExists = System.IO.Directory.Exists(pathString); 

       if (!isExists) 
        System.IO.Directory.CreateDirectory(pathString); 

       var path = string.Format("{0}\\{1}", pathString, file.FileName); 
       file.SaveAs(path); 

      } 

     } 

    } 
    catch (Exception ex) 
    { 
     isSavedSuccessfully = false; 
    } 


    if (isSavedSuccessfully) 
    { 
     return Json(new { Message = fName }); 
    } 
    else 
    { 
     return Json(new { Message = "Error in saving file" }); 
    } 
} 

BundleConfig add

bundles.Add(new StyleBundle("~/Content/dropzonescss").Include(
     "~/Scripts/dropzone/css/basic.css", 
     "~/Scripts/dropzone/css/dropzone.css")); 
bundles.Add(new ScriptBundle("~/bundles/dropzonescripts").Include(
     "~/Scripts/dropzone/dropzone.js")); 

我不知道它爲什麼這樣表現。 加載部件是否工作正常,但圖形是錯誤的,看起來像:

enter image description here

回答

1

它看起來像懸浮窗NuGet包不會爲懸浮窗CSS文件\ CSS子文件,所以軟件包配置不正確。 (這是正確的,但文件夾不在那裏)。

創建的文件夾腳本\懸浮窗\ CSS(從腳本\懸浮窗文件夾複製到新的文件夾移動的css文件)

你可以看到如何在懸浮窗文件夾應該通過查看是解決看github上:

Dropzone example solution

+0

THK,我發現那裏的問題小前是和打算寫。我現在被提出另一個問題......但是dropzone與ie兼容嗎? –

+0

ie 10 works ok,但ie 9和8(在IE開發人員工具中使用瀏覽器模式)不起作用 - 這是因爲拖放文件需要HTML 5,並且在ie 10之前,Internet Explorer只有有限的支持。 –

+0

我發現這篇文章:https://social.msdn.microsoft.com/Forums/silverlight/en-US/383198a9-dbb4-4f94-8713-484e5bacb14b/dragdrop-not-active-during-debugging?forum=silverlightdevtools。該問題似乎來自VisualStudio的特權。現在我試圖在IIS上實現我的網站 –