1

我正在我的 MVC3 剃须刀项目中实现拖放功能。请帮助我。我的应用程序如下所示。

我的问题是 HttpPostedFileBase 文件始终为空；任何机构都可以在这方面提供帮助吗

    namespace UploadFiles.Controllers
    {
        public class HomeController : Controller
        {

            public ActionResult Index()
            {
                ViewBag.Message = "Welcome to ASP.NET MVC!";

                return View();
            }
            [HttpPost]
            public ActionResult UpLoad(HttpPostedFileBase file)
            {
                return View("About");
            }

            public ActionResult About()
            {
                return View();
            }
        }
    }

![enter image description here][1]     @{
        ViewBag.Title = "Home Page";
    }

    <h2>@ViewBag.Message</h2>
    <style>
        #DropBox {
        border: 1px dashed #f0f0f0;
        text-align: center;
        font-weight: bold;
        font-size:20px;
        padding: 1em inherit;
        margin: 1em inherit;
        color: #555;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        width:600px;
        height:100px;
    }
    #DropBox.hover
    {
        color: #f00;
        border-color: #f00;
        border-style: solid;
        box-shadow: inset 0 3px 4px #888;
    }
    #progress p
    {
        display: block;
        width: 240px;
        padding: 2px 5px;
        margin: 2px 0;
        border: 1px inset #446;
        border-radius: 5px;
        background: #eee url("progress.png") 100% 0 repeat-y;
    }

    #progress p.success
    {
        background: #0c0 none 0 0 no-repeat;
    }

    #progress p.failed
    {
        background: #c00 none 0 0 no-repeat;
    }
    #messages
    {
        padding: 0 10px;
        margin: 1em 0;
        border: 1px solid #600;
        width:580px;
    }
    </style>

    @{
        using (Html.BeginForm("UpLoad", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "upload" }))
        {
            <input type="file" name="UpFile" id="UpFile" multiple="multiple"/>
            <div id="DropBox" >Select or drop a file...</div>
            <div id="progress"></div>
            <div id="messages">&nbsp;</div>

            <input class="submit-button" type="submit" value="Translate" />
        }
    }

    <script>

    (function() {

        // getElementById
        function $id(id) {
            return document.getElementById(id);
        }


        // output information
        function Output(msg) {
            var m = $id("messages");
            m.innerHTML = msg + m.innerHTML;
        }


        // file drag hover
        function FileDragHover(e) {
            e.stopPropagation();
            e.preventDefault();
            e.target.className = (e.type == "dragover" ? "hover" : "");
        }


        // file selection
        function FileSelectHandler(e) {

            // cancel event and hover styling
            FileDragHover(e);

            // fetch FileList object
            var files = e.target.files || e.dataTransfer.files;

            // process all File objects
            for (var i = 0, f; f = files[i]; i++) {
                ParseFile(f);
                UploadFile(f);
            }

        }


        // output file information
        function ParseFile(file) {

            Output(
                "<p>File information: <strong>" + file.name +
                "</strong> type: <strong>" + file.type +
                "</strong> size: <strong>" + file.size +
                "</strong> bytes</p>"
            );
            var reader = new FileReader();
            reader.readAsDataURL(file);
        }


        // upload JPEG files
        function UploadFile(file) {

            // following line is not necessary: prevents running on SitePoint servers
            if (location.host.indexOf("sitepointstatic") >= 0) return
            var formData = new FormData();
            formData.append('file', file);
            var xhr = new XMLHttpRequest();
            if (xhr.upload) {

                // create progress bar
                var o = $id("progress");
                var progress = o.appendChild(document.createElement("p"));
                progress.appendChild(document.createTextNode("upload " + file.name));


                // progress bar
                xhr.upload.addEventListener("progress", function(e) {
                    var pc = parseInt(100 - (e.loaded / e.total * 100));
                    progress.style.backgroundPosition = pc + "% 0";
                }, false);

                // file received/failed
                xhr.onreadystatechange = function(e) {
                    if (xhr.readyState == 4) {
                        progress.className = (xhr.status == 200 ? "success" : "failure");
                    }
                };


                // start upload
                xhr.open("POST", $id("upload").action, true);
                xhr.setRequestHeader("X_FILENAME", file.name);
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        console.log('all done: ' + xhr.status);
                    } else {
                        console.log('Something went terribly wrong...');
                    }
                };
                xhr.send(file);

            }

        }


        // initialize
        function Init() {

            var fileselect = $id("UpFile"),
                filedrag = $id("DropBox");
                //submitbutton = $id("submitbutton");

            // file select
            fileselect.addEventListener("change", FileSelectHandler, false);

            // is XHR2 available?
            var xhr = new XMLHttpRequest();
            if (xhr.upload) {

                // file drop
                filedrag.addEventListener("dragover", FileDragHover, false);
                filedrag.addEventListener("dragleave", FileDragHover, false);
                filedrag.addEventListener("drop", FileSelectHandler, false);
            }

        }

        // call initialization file
        if (window.File && window.FileList && window.FileReader ) {
            Init();
        }


    })();
    </script>
4

0 回答 0