使用Uploadify实时文件上传进度栏

时间:2019-02-14 12:37:59

标签: asp.net-mvc jquery-plugins jquery-file-upload uploadify

我想使用Jquery Uploadify插件实现实时文件上传进度栏。我是Jquery插件的新手,使用此工具时遇到问题。

这是我的html页面:

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head> 
<meta name="viewport" content="width=device-width" />
<title>::Uploadify Example::</title>
<script type="text/javascript" src="http://code.jquery.com/jquery- 
1.7.2.min.js"></script>

<script src="~/Content/jquery.uploadify.js"></script>
<script src="~/Content/jquery.uploadify.min.js"></script>

<link rel="stylesheet" type="text/css" 
href="@Url.Content("~/Content/uploadify.css")" />
<script type="text/javascript">
    $(function () {
        $('#file_upload').uploadify({
            'swf': "@Url.Content("~/Content/uploadify.swf")",

            'uploader': "@Url.Action("UploadFile", "Home")",
            'onUploadSuccess': function (file, data, response) {

                $("#uploaded").append("<img src='" + data + "' 
alt='Uploaded Image' />");
            }
        });
    });
</script>
</head>
<body>
<div>
    Click Select files to upload files.
    <input type="file" name="file_upload" id="file_upload" />
</div>
<div id="uploaded">
</div>
</body>
</html>

我的控制器:

    [HttpPost]
    public ActionResult UploadFile()
    {
        var file = Request.Files["Filedata"];
        string savePath = Server.MapPath(@"~\Content\" + file.FileName);
        file.SaveAs(savePath);

        return Content(Url.Content(@"~\Content\" + file.FileName));
    }

我也没有收到任何控制台错误。.请指导我。

0 个答案:

没有答案