首页 > 资讯 > 后端开发 > ASP.NET >ASP.NET MVC使用JSAjaxFileUploader插件实现单文件上传

461

分享到

ASP.NET MVC使用JSAjaxFileUploader插件实现单文件上传

2024-04-02 19:04:59 461人浏览八月长安

摘要

先看效果：上传文件显示进度条：停止上传按钮和关闭缩略图按钮：限制上传文件的类型：限制上传文件的尺寸：上传成功后显示缩略图、文件名以及回传信息：点击界面上的删除按

先看效果：

上传文件显示进度条：

停止上传按钮和关闭缩略图按钮：

限制上传文件的类型：

限制上传文件的尺寸：

上传成功后显示缩略图、文件名以及回传信息：

点击界面上的删除按钮，界面删除，同步删除文件夹中文件。
重新上传文件，界面删除，同步删除文件夹中文件，并界面显示新的缩略图、文件名等。

HomeController

由于需要把保存到文件夹文件的路径、文件名等回传给界面，所以需要一个类，专门负责回传给客户端所需要的信息。

    public class UploadFileResult
    {
        public string FileName { get; set; }
        public int Length { get; set; }
        public string Type { get; set; }
        public bool IsValid { get; set; }
        public string Message { get; set; }
        public string FilePath { get; set; } 
    }

把上传的文件名改成以时间命名的格式，并保存到文件夹，再把回传信息以JSON形式传递给视图。关于删除，需要接收来自视图的文件名参数。

        #region 上传单个文件
 
        //显示
        public ActionResult Index()
        {
            return View();
        }
 
        //接收上传
        [HttpPost]
        public ActionResult UploadFile()
        {
            List<UploadFileResult> results = new List<UploadFileResult>();
            foreach (string file in Request.Files)
            {
                HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
                if (hpf.ContentLength == 0 || hpf == null)
                {
                    continue;
                }
 
                var fileName = DateTime.Now.ToString("yyyyMMddhhmmss") +
                               hpf.FileName.Substring(hpf.FileName.LastIndexOf('.'));
                string pathForSaving = Server.MapPath("~/ajaxUpload");
                if (this.CreateFolderIfNeeded(pathForSaving))
                {
                    hpf.SaveAs(Path.Combine(pathForSaving, fileName));
                    results.Add(new UploadFileResult()
                    {
                        FilePath = Url.Content(String.FORMat("~/AjaxUpload/{0}", fileName)),
                        FileName = fileName,
                        IsValid = true,
                        Length = hpf.ContentLength,
                        Message = "上传成功",
                        Type = hpf.ContentType
                    });
                }
            }
 
            return json(new
            {
                name = results[0].FileName,
                type = results[0].Type,
                size = string.Format("{0} bytes", results[0].Length),
                path = results[0].FilePath,
                msg = results[0].Message
            });
        }    
 
        #region 共用方法
        /// <summary>
        /// 检查是否要创建上传文件夹，如果没有就创建
        /// </summary>
        /// <param name="path">路径</param>
        /// <returns></returns>
        private bool CreateFolderIfNeeded(string path)
        {
            bool result = true;
            if (!Directory.Exists(path))
            {
                try
                {
                    Directory.CreateDirectory(path);
                }
                catch (Exception)
                {
                    //TODO：处理异常
                    result = false;
                }
            }
            return result;
        }
 
        //根据文件名称删除文件
        [HttpPost]
        public ActionResult DeleteFileByName(string name)
        {
            string pathForSaving = Server.MapPath("~/AjaxUpload");
            System.IO.File.Delete(Path.Combine(pathForSaving, name));
            return Json(new
            {
                msg = true
            });
        }
        #endregion

Home/Index.cshml

前台视图主要做如下几件事：

每次上传之前检查表格中是否有数据，如果有，实施界面删除并同步删除文件夹中的文件
上传成功动态创建表格行显示缩略图、文件名和删除按钮
点击删除按钮实施界面删除并同步删除文件夹中的文件

由于表格行是动态生成的，需要对删除按钮以"冒泡"的方式注册事件： $('#tb').on("click", ".delImg", function ()

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/JSAjaxFileUploader/Jquery.JSAjaxFileUploader.CSS" rel="external nofollow"  rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/JSAjaxFileUploader/JQuery.JSAjaxFileUploaderSingle.js"></script>
    <style type="text/css">
        #tb table{
            border-collapse: collapse;              
            width: 600px;         
        }
 
        #tb td {
            text-align: center;
            padding-top: 5px;
            width: 25%;
        }
 
        #tb tr {
            background-color: #E3E3E3;
            line-height: 35px;
        }
 
        .showImg {
            width: 50px;
            height: 50px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //隐藏显示图片的表格
            $('#tbl').hide();
 
            $('#testId').JSAjaxFileUploader({
                uploadUrl: '@Url.Action("UploadFile","Home")',
                inputText: '选择上传文件',
                //fileName: 'photo',
                maxFileSize: 512,    //Max 500 KB file 1kb=1024字节
                allowExt: 'gif|jpg|jpeg|png',
                zoomPreview: false,
                zoomWidth: 360,
                zoomHeight: 360,
                beforesend: function (file) {
                    if ($('.imgName').text() != "") {
                        deleteImg();
                        $('#tbl').hide();
                    }
                },
                success: function (data) {
                    $('.file_name').html(data.name);
                    $('.file_type').html(data.type);
                    $('.file_size').html(data.size);
                    $('.file_path').html(data.path);
                    $('.file_msg').html(data.msg);
                    createTableTr();
                    $('#tbl').show();
                    $('.showImg').attr("src", data.path);
                    $('.imgName').text(data.name);
                },
                error: function (data) {
                    alert(data.msg);
                }
            });
 
            //点击删除链接删除刚上传图片
            $('#tbl').on("click", ".delImg", function () {
                deleteImg();
                //window.location.reload();
            });
        });
 
        //删除图片方法：点击删除链接或上传新图片删除原先图片用到
        function deleteImg() {
            $.ajax({
                cache: false,
                url: '@Url.Action("DeleteFileByName", "Home")',
                type: "POST",
                data: { name: $('.imgName').text() },
                success: function (data) {
                    if (data.msg) {
                        //alert("图片删除成功");
                        $('.delImg').parent().parent().remove();
                        
                    }
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    alert("出错了 '" + jqXhr.status + "' (状态: '" + textStatus + "', 错误为: '" + errorThrown + "')");
                }
            });
        }
 
        //创建表格
        function createTableTr() {
            var table = $('#tbl');
            table.append("<tr><td><img class='showImg'/></td><td colspan='2'><span class='imgName'></span></td><td><a class='delImg' href='javascript:void(0)'>删除</a></td></tr>");
        }
    </script>
</head>
<body>
    <div id="testId"></div>
    
    <div id="tb">
        <table id="tbl">
            <tbody>         
            </tbody>
        </table>
    </div>
        <div class="file_name"></div>
        <br />
        <div class="file_type"></div>
        <br />
        <div class="file_size"></div>
        <br />
        <div class="file_path"></div>
        <br />
        <div class="file_msg"></div>
</body>
</html>

另外：需要删除源js文件中input元素的multiple属性，使之只能接收单个文件。

本篇源码在github

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对编程网的支持。如果你想了解更多相关内容请查看下面相关链接

--结束END--

本文标题: ASP.NET MVC使用JSAjaxFileUploader插件实现单文件上传

本文链接: https://lsjlt.com/news/167323.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

ASP.NET MVC使用JSAjaxFileUploader插件实现单文件上传

HomeController

Home/Index.cshml

ASP.NET MVC使用JSAjaxFileUploader插件实现单文件上传

asp.net如何使用ajaxFileUpload插件上传文件

asp.net使用ajaxFileUpload插件上传文件（附源码）

ASP.NET实现文件上传

ASP.NET实现文件上传功能

使用Spring MVC怎么实现文件上传和下载

Spring MVC实现文件上传和下载

asp.net中表单上传功能如何实现ajax文件异步上传

php文件上传插件如何使用

jQuery插件ajaxfileupload.js怎么实现上传文件

Spring MVC 实现文件的上传和下载

SpringBoot实现单文件与多文件上传

简单实现Android文件上传

javaWeb实现简单文件上传

SpringBoot简单实现文件上传

asp.net core webapi文件上传功能的实现

使用AJAX实现上传文件

SpringMVC 单文件上传与多文件上传实例

django1.8使用表单上传文件的实现方法

如何使用 Golang 实现 Form 表单文件上传？

[红色]一次性下载远程页面上的所有内容284815分享

通过数组给您的文件排序284815解决

[紫色]利用ASP发送和接收XML数据的处理方法284815实例

ASP动态include文件284815分享

用asp自动解析网页中的图片地址284627(思路详解)

AspJpeg V1.5.0 破解版使用方法284587问题及解决

ASP动态include文件284587过程讲解

用asp自动解析网页中的图片地址284567处理办法

[紫色]利用ASP发送和接收XML数据的处理方法284567过程讲解

Session对象失效的客户端解决方法284567详解