MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件02-多文件上传

上一篇中,使用客户端jJSAjaxFileUploader插件实现单文件异步上传,本篇实现多文件异步上传。

本篇源码在github,先看效果:

● 上传文件显示进度条。
● 停止上传按钮和关闭缩略图按钮。

● 限制上传文件的类型。
● 限制上传文件的尺寸。

●同时上传多个文件成功后显示缩略图、文件名:

● 点击界面上的删除按钮,界面删除,同步删除文件夹中文件。

再点击上传文件,界面追加一行新的缩略图、文件名、删除按钮:


HomeController

把上传的文件名改成以GUID命名的格式,避免多文件名称重复,并保存到文件夹,再把回传信息以json形式传递给视图。关于删除,需要接收来自视图的文件名参数。

        #region 上传多个文件
        public ActionResult ShowMultiple()
        {
            return View();
        }
 
        [HttpPost]
        public ActionResult UplpadMultipleFiles()
        {
            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(‘.‘));
                var fileName = Guid.NewGuid().ToString() +
                               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
            });
 
        }
        #endregion
 
        #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/
ShowMultiple.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="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/JSAjaxFileUploader/JQuery.JSAjaxFileUploaderMultiple.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("UplpadMultipleFiles","Home")‘,
                inputText: ‘选择多个上传文件‘,
                fileName: ‘photo‘,
                maxFileSize: 512000,    //Max 500 KB file 1kb=1024字节
                allowExt: ‘gif|jpg|jpeg|png‘,
                zoomPreview: false,
                zoomWidth: 360,
                zoomHeight: 360,
                success: function (data) {
                    $(‘#tbl‘).show();
                    createTableTr(data.path, data.name);
                },
                error: function (data) {
                    alert("出错了~~");
                }
            });
 
            //点击行上的删除链接
            $(‘#tb‘).on("click", ".delImg", function () {
                var $link = $(this);
                $.ajax({
                    cache: false,
                    url: ‘@Url.Action("DeleteFileByName", "Home")‘,
                    type: "POST",
                    data: { name: $link.parent().prev().find(‘.imgName‘).text() },
                    success: function (data) {
                        if (data.msg) {
                            //alert("图片删除成功");
                            $link.parent().parent().remove();
                        }
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        alert("出错了 ‘" + jqXhr.status + "‘ (状态: ‘" + textStatus + "‘, 错误为: ‘" + errorThrown + "‘)");
                    }
                });
            });
        });
 
 
        //创建表格
        function createTableTr(img, imgName) {
            var table = $(‘#tbl‘);
            table.append("<tr><td><img class=‘showImg‘ src=‘" + img + "‘/></td><td colspan=‘2‘><span class=‘imgName‘>" + 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>
 
</body>
</html>
 

另外:

需要把源js文件中input元素的multiple属性恢复,使之能接收多个文件。

MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件02-多文件上传,布布扣,bubuko.com

时间: 04-29

MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件02-多文件上传的相关文章

基于HTML5的可预览多图片Ajax上传

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇“Ajax Upload多文件上传插件”的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中之一就是支

普通Html文件图片上传(Storing Image To DB)

一.uploadImage.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <tit

使用Kindeditor的多文件(图片)上传时出现上传失败的解决办法/使用Flash上传多文件(图片)上传时上传失败的解决办法

近来用户反映希望我们把在线编辑器中的多图片上传功能实现,因为他们在编辑商品描述时经常会有一次上传多张图片的需求,如果要逐张选择的话效率很低,客户的需求就是我们的追求,很快我们就把完善功能排到了日程表中,要求尽快实现. 我们在项目中使用的在线编辑器是Kindeditor4.1.10,它们的多文件上传插件是使用Flash实现的,原本应该就是能使用的,但为什么老是显示上传失败的,百度了一下前人的经验和教训,出现这种情况,有两种可能:1)上传的目标文件夹没有写权限,导致上传的文件无法进行写操作,所以上传

ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2.0实现数据读取.这个功能在实际工作种经经常使用到,希望能给须要做这方面的人有些帮助. 一.功能页面布局及介绍 1.上传页面布局及input file上传功能 2.上传页面文件正在上传效果 3.上传完毕效果,多文件展示区 二.功能代码实现及资源引用 1.js资源文件引用 html页面js引用.须要引

WebUploader文件图片上传插件的使用

最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家 需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUploader /*图片上传 */ var $ = jQuery, $img=$("#imagePath_img"), // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWid

Mvc检查图片格式后上传

/// <summary> /// 检查是否文件是否图片并保存 /// </summary> /// <param name="file">文件</param> /// <param name="savePath">保存文件的目录(例:/Img/Mark/)</param> /// <param name="newFileName">重命名后文件的名称</p

[sharepoint]rest api文档库文件上传,下载,拷贝,剪切,删除文件,创建文件夹,修改文件夹属性,删除文件夹,获取文档列表

写在前面 最近对文档库的知识点进行了整理,也就有了这篇文章,当时查找这些接口,并用在实践中,确实废了一些功夫,也为了让更多的人走更少的弯路. 系列文章 sharepoint环境安装过程中几点需要注意的地方 Rest API的简单应用 rest api方式实现对文档库的管理 通过WebClient模拟post上传文件到服务器 WebHttpRequest在sharepoint文档库中的使用 [sharepoint]Rest api相关知识(转) [sharepoint]根据用户名获取该用户的权限

基于MVC+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这样给我们扩展使用有很多的不方便.基于这个原因,我想如果能够独立一个模块,自动根据图标生成图标CSS样式文件,并存储相应的记录到数据库里面,方便我们查询显示,那样我们使用起来就很方便了,最后有了这些数据,只需要做一个通用的图标选择界面,并可以在很多地方重用了.本文正是基于这个思路,开发了一个图标管理模

MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求

源码参考:链接:http://pan.baidu.com/s/1pKhHHMj  密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命名为:Mvc4JQueryAjaxDemo 2:新建控制器:在Controllers文件夹上 右键-->添加-->控制器,命名为:HomeController (HomeController .cs) 3:在控制器HomeController中新增Action: GetDate() 1 using