Question

我正在创建一个ASP.NET MVC 5应用程序，用户应该能够上传大文件（2-3 GB）。要上传文件，我使用了ftpWebRequest类。现在，我有一个小的jQuery脚本进行Ajax调用，将完整的路径发送到服务器，然后控制器将文件上传到外部ftp服务器。

我想添加进度条。下面你可以找到我到目前为止所得到的：

在按钮上单击模式打开;
上传开始（即使我关闭我的IE，它仍然继续）;
进程条不起作用。

我做错了什么？

Index.cshtml

@{
    ViewBag.Title = "File Upload";
}

<div class="row">
    <h2>File upload</h2>
</div>
<div class="row">

            <div class="form-group">
                <input type="file" name="file" id="file" />
            </div>

            <div class="form-group noleftpadding">
                <input type="button" value="Upload File" class="btn btn-primary" />
            </div>

</div>

@section Scripts{

<script type="text/javascript">
    var myApp;
    myApp = myApp || (function () {

        var modal = '';
        modal += '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">';
        modal += '<div class="modal-dialog">';
        modal += '<div class="modal-content">';
        modal += '<div class="modal-header"><h1>Processing...</h1></div>';
        modal += '<div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div>';
        modal += '</div></div></div>';
        var pleaseWaitDiv = $(modal);
        return {
            showPleaseWait: function () {
                pleaseWaitDiv.modal();
            },
            hidePleaseWait: function () {
                pleaseWaitDiv.modal('hide');
            },

        };
    })();

    $(function () {

        $(":button").on("click", function () {

            uploadFile();
        });


        function uploadFile() {
            myApp.showPleaseWait();
            var file = $('#file').val();
            alert(file);
            var formData = new FormData();
            formData.append("file", file);
            ajax = new XMLHttpRequest();
            ajax.upload.addEventListener("progress", progressHandler, false);
            ajax.addEventListener("load", completeHandler, false);
            ajax.open("POST", "/Upload/AjaxUploadFile/");
            ajax.send(formData);
        }

        function progressHandler(event) {
            var percent = (event.loaded / event.total) * 100;
            $('.bar').width(percent);
        }

        function completeHandler() {
            myApp.hidePleaseWait();
            $('.bar').width(100);
        }
    });
</script>


}

UploadController

public ActionResult AjaxUploadFile(string file)
        {
            Dictionary<string, string> strMsg = new Dictionary<string, string>();
            completePath = System.IO.Path.GetFullPath(file);
            fileName = System.IO.Path.GetFileName(completePath);

            string strFtp = "ftp://" + serverIp + "/folder/" + fileName;

            try
            {
                FtpWebRequest ftpReq = (FtpWebRequest)WebRequest.Create(strFtp);
                ftpReq.UseBinary = true;
                ftpReq.Method = WebRequestMethods.Ftp.UploadFile;
                ftpReq.Credentials = new NetworkCredential(userName, password);

                byte[] b = System.IO.File.ReadAllBytes(completePath);
                ftpReq.ContentLength = b.Length;
                using (Stream s = ftpReq.GetRequestStream())
                {
                    s.Write(b, 0, b.Length);
                }

                FtpWebResponse ftpResp = (FtpWebResponse)ftpReq.GetResponse();
                if (ftpResp != null)
                {
                    strMsg.Add("fileUpload", "Success!");
                }
                else {
                    strMsg.Add("fileUpload", "No file uploaded!");
                }

                return Json(strMsg, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                strMsg.Add("fileUpload", "Server Error!");
                return Json(strMsg, JsonRequestBehavior.AllowGet);
            }


        }

带进度条的ftpwebrequest

0 个答案: