.Net Webuploader 应用

最新推荐文章于 2023-06-08 16:52:33 发布
最新推荐文章于 2023-06-08 16:52:33 发布
阅读量175 收藏
点赞数
分类专栏： .Net WebUpLoad应用 文章标签： .Net WebUpLoad应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40684778/article/details/86622271
版权

Html部分

<head>
    <meta name="viewport" content="width=device-width" />
    <title>UpDemo</title>
    <link href="~/Content/webuploader/webuploader.css" rel="stylesheet" />
    <script src="~/Content/theme/assets/global/plugins/jquery.min.js"></script>
    <script src="~/Content/webuploader/webuploader.js"></script>
</head>
<body>
    <div id="uploader" class="wu-example">
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">选择文件</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
    </div>

Js部分

 $(document).ready(function () {
            initUpload();
        });
        function initUpload() {
            var $ = jQuery;
            var $list = $('#thelist');
            
            var uploader = WebUploader.create({
               // GUID=GUID;
                // 选完文件后，是否自动上传。
                auto: false,
                // swf文件路径
                swf: '../Content/webuploader/Uploader.swf',

                // 文件接收服务端。

                //server: applicationPath + 'PublicInfoManage/Upload/Upload',
                server: '../../FileUpload/Upload',//"http://localhost:47542" +
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker',

                chunked: true,//开始分片上传
                chunkSize: 2048000,//每一片的大小
                //formData: {
                //    guid: GUID //自定义参数，待会儿解释
                //},

                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false
            });
            // 当有文件被添加进队列的时候
            uploader.on('fileQueued', function (file) {
                
                $list.append('<li id="' + file.id + '" class="list-group-item">' +
                    '<span class="fileName" dataValue="">' + file.name + '</span>' +
                    '<span class="state"  style=\" margin-left: 10px;\">等待上传</span>' +
                    '<span class="filepath" dataValue="0" style=\" margin-left: 10px;display: none;\"></span>' +
                    '<span class="download" style="margin-left:20px;"></span>' +
                    '<span class="webuploadDelbtn"style=\"float: right;display: none; \">删除<span>' +
                    '</li>');
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo($li).find('.progress-bar');
                }

                $li.find('span.state').text('上传中');

                $percent.css('width', percentage * 100 + '%');

            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file, response) {
                var $li = $('#' + file.id);
                console.log(response);
                if (response.Code == "1") {
                    //$('#' + file.id).find('p.state').text('已上传');
                    $.post('../../FileUpload/SaveInfo', { fileName: file.name, fileUrl: response.Data, fileType: file.ext, fileSize: file.size }, function (data) {
                        $li.find('span.state').html("上传成功");
                        $li.find('span.filepath').attr("dataValue", 1);
                        $li.find('span.fileName').attr("dataValue", data.filename);
                        $li.find('span.fileName').html(data.filename);
                        $li.find('span.download').html("<a href=\"../../doc/" + response.Data+ "\">下载</a>")
                        $li.find('span.webuploadDelbtn').show();
                        $li.find('span.filepath').html(data.filepath);
                        //增加列表存储
                        //files.push(data);
                    });
                }
                else
                {

                }
                
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file, reason) {
                $('#' + file.id).find('p.state').text(reason);
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').fadeOut();
            });

            //所有文件上传完毕
            uploader.on("uploadFinished", function () {
                //提交表单

            });
            //开始上传
            $("#ctlBtn").click(function () {
                uploader.upload();

            });
            //删除
            $list.on("click", ".webuploadDelbtn", function () {
                debugger
                var $ele = $(this);
                var id = $ele.parent().attr("id");
                var file = uploader.getFile(id);
                uploader.removeFile(file);
                $ele.parent().remove();
                //移除数组
                var destFile = findFile(file.name)
                var index = files.indexOf(destFile);
                if (index > -1) {
                    files.splice(index, 1);
                }
            });
        }

保存图片方法

  [HttpPost]
        public string Upload()
        {
            Message msg = new Message();
            string url = "";
            if (Request.Files.Count > 0)
            {
                HttpPostedFileBase uploadFile = Request.Files[0] as HttpPostedFileBase;
                var now = DateTime.Now;
                string filePath = Server.MapPath("~/doc/file/" + @now.ToString("yyyyMMdd") + "/");
                string ViewPath = "/file/" + @now.ToString("yyyyMMdd") + "/";
                url = UploadHelper.SaveFile(uploadFile, filePath, ViewPath);
            }

            if (string.IsNullOrEmpty(url))
            {
                msg.Code = "0";
                msg.Msg = "图片上传失败";
            }
            else if (url.Contains("图片尺寸过大"))
            {
                msg.Code = "0";
                msg.Msg = "图片尺寸过大";
            }
            else
            {
                //item.Url = picHelper.GetPictureUrl(item.ID, item.Url, targetSize: 600, showDefaultPicture: true, isSquare: true);
                msg.Code = "1";
                msg.Msg = "上传成功";
                msg.Data = url;
            }
            return msg.ToJsonString();

        }
         //这里是进行二进制到Base64的转换
        public static string ByteToBase64(byte[] ByteArry, int Start, int Length)
        {
            string Result;
            Result = System.Convert.ToBase64String(ByteArry, Start, Length);
            return Result;
        }

        public static bool CheckImage(int Width, int Height)
        {
            bool Result = true;
            //int width = 1000, height = 2000;
            //if (Height > height)//Width > width ||
            //{
            //    Result = false;
            //}
            return Result;
        }

        public static string SaveFile(HttpPostedFileBase uploadFile, string filePath, string ViewPath)
        {

            NLog.Logger log = NLog.LogManager.GetCurrentClassLogger();

            List<string> allowFiles = new List<string>();
            allowFiles.Add("png");
            allowFiles.Add("jpg");
            allowFiles.Add("jpeg");
            allowFiles.Add("bmp");
            allowFiles.Add("gif");
            string fileName = "";

            int FileLength = uploadFile.ContentLength;

            if (FileLength > 10 * 1024 * 1024)
            {
                return "图片尺寸过大";
            }
            if (uploadFile.ContentType.Contains("image"))
            {
                //判断图片的长和宽
                Byte[] FileByteArray = new byte[FileLength];//图象文件临时存储到Byte数组里
                Stream StreamObject = uploadFile.InputStream;//建立数据流对象
                StreamObject.Read(FileByteArray, 0, FileLength);
                //转换成Base64格式

                string Base64String = ByteToBase64(FileByteArray, 0, FileByteArray.Length);
                //建立图片对象
                System.Drawing.Image MyImage = System.Drawing.Image.FromStream(StreamObject);

                bool CheckImageResult = CheckImage(MyImage.Width, MyImage.Height);

                if (!CheckImageResult)
                {
                    return "图片尺寸过大";
                }
            }
            
            string FileName = uploadFile.FileName;
            int lastIndex = FileName.LastIndexOf('.');

            string FileType = FileName.Substring(lastIndex);
            var now = DateTime.Now;

            if (!Directory.Exists(filePath))
            {
                Directory.CreateDirectory(filePath);
            }
            int rand = new Random().Next(100, 999);
            fileName = now.ToString("yyyyMMddhhmmssffff") + rand +  FileType;
            uploadFile.SaveAs(filePath + fileName);

            //filePath = filePath.Replace("\\", "/");
            //string[] ContentType = uploadFile.ContentType.Split('/');
               
            return ViewPath + fileName;

        }

将图片信息保存到表中

public string SaveInfo(string fileName,string fileUrl,string fileType,int fileSize=0,string RelID="")
        {
            Message msg = new Message();

            if (string.IsNullOrEmpty(fileUrl) || string.IsNullOrEmpty(fileName)||string.IsNullOrEmpty(fileType))
            {
                msg.Code = "0";
                msg.Msg = "参数传递错误";
                return msg.ToJsonString();
            }


            SysFileBLL FileHelper = new SysFileBLL();
            SysFile file = new SysFile();
            file.FileName = fileName;
            file.FSize = fileSize;
            file.FType = fileType;
            file.RelID = RelID;
            file.Url = fileUrl;
            file.IsPic = 0;

            bool sign = FileHelper.Save(file);
            if (sign)
            {
                msg.Code = "1";
                msg.Msg = "保存成功";
                msg.Data = file.ID;
            }
            else
            {
                msg.Code = "0";
                msg.Msg = "保存失败";

            }

            return msg.ToJsonString();

        }
weixin_40684778
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webuploader,.net版
09-08
最流行文件上传控件（webuploader）
Webuploader图片批量上传（C# Asp.Net）
09-14
使用webuploader插件实现图片的批量上传，图片上传时显示进度条，图片上传至文件夹，并且支持将图片路径保存到数据库
百度Webuploader 大文件分片上传（.net接收）
weixin_30731287的博客
11-23 190
　　前阵子要做个大文件上传的功能，找来找去发现Webuploader还不错，关于她的介绍我就不再赘述。 　　动手前，在园子里找到了一篇不错的分片上传的帖子，参考之后，踏出了第一步。此文记录我这次实践的点滴，仅作分享与讨论。 　　 　　关于插件的使用可以参考快速使用文档。在Github上下载了最新的压缩包后，基于其中的一个例子（image-upload）做了修改，主要是补充了.net后台分片接...
.net WebUploader 分片上传
weixin_45525177的博客
05-27 157
ASP.NET上传文件用FileUpLoad就可以，但是对文件夹的操作却不能用FileUpLoad来实现。 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压。 ASP.NET页面设计：TextBox和Button按钮。 TextBox中需要自己受到输入文件夹的路径（包含文件夹），通过Button实现选择文件夹的问题还没有解决，暂时只能手动输入。 两种方法：生成rar和zip。 1.生成rar using Microsoft.Win32; using System
.net WebUploader 分块上传
weixin_45525177的博客
05-30 127
以ASP.NET Core WebAPI作后端API，用Vue构建前端页面，用Axios从前端访问后端API ,包括文件的上传和下载。 准备文件上传的API #region文件上传可以带参数 [HttpPost("upload")] public JsonResult uploadProject(IFormFile file, string userId) { if (file != nul...
ASP.NET webUploader上传大视频文件相关web.config配置
10-20
总结来说，要让ASP.NET webUploader支持大视频文件的上传，你需要在web.config中进行以下关键配置： 1. 修改`<httpRuntime>`的`maxRequestLength`以允许更大的文件上传。 2. 设置`executionTimeout`以延长请求处理...
ASP.NET_WebUploader.zip
05-18
WebUploader是百度推出的一款前端文件上传组件，它支持多文件选择、预览、进度条显示、断点续传等功能，广泛应用于网页中的图片、视频等文件上传。在ASP.NET项目中，结合WebUploader，开发者可以构建出用户友好的...
webuploader实例 asp.net 非MVC
10-28
在ASP.NET环境下，虽然它通常与MVC架构配合使用，但本实例展示的是非MVC模式下的应用，这意味着我们将使用传统的ASP.NET Web Forms或者简单的HTTP处理程序来处理上传请求。 在"webuploader实例 asp.net 非MVC"项目...
ASP.NET MVC Webuploader实现上传功能
10-18
ASP.NET MVC是一个强大的框架，用于构建动态、数据驱动的Web应用程序。Webuploader是百度WebFE(FEX)团队开发的一个文件上传组件，它结合了HTML5和Flash技术，以实现跨浏览器的兼容性，支持从现代浏览器到较旧的IE6+...
Asp.net_WEB 版 WebUploader大文件上传带进度条
07-11
基于ASP.NET4.0 WEB版的 WebUploader大文件上传实例,带进度条显示,可方便移植到ASP.NET4.0 WEB程序中
.Net MVC WebUploader 前后台同步、异步上传源码（含备注）
02-11
.Net MVC WebUploader 前后台同步、异步上传源码 个人在前人的技术上进行了加工。修复了一些代码中不良好的东西，另外在异步上传修改了样式。代码可以直接运行 程序建在Area中的Plugin中，有详细说明，结合你的业务，可以直接使用。 如果有疑问，保持沟通，不会白费你的积分
.NET MVC4.0 使用WebUploader上传文件实例，支持大视频上传
04-11
.NET MVC4.0 使用WebUploader上传文件，支持多种格式上传,支持大视频上传,分片上传。PS：基于.NET MVC4.0 框架，WebUploader插件 实现的上传功能。
百度开源webuploader文件上传组件ASP.NET\DOTNET\C#.NET的DEMO案例
01-21
百度baidu前端开发组开源项目webuploader，旨在为开发者免费提供开源的文件上传组件，但baidu提供出来的demo只有php版本，本实例为ASP.NET\DOTNET\C#.NET的DEMO，专门为大家提供分享！
.NET基于WebUploader大文件分片上传、断网续传、秒传
极客神殿
06-25 1915
现在的项目开发基本上都用到了上传文件功能，或图片，或文档，或视频。 我们常用的常规上传已经能够满足当前要求了，然而有时会出现如下问题： 文件过大（比如1G以上），超出服务端的请求大小限制； 请求时间过长，请求超时； 传输中断，必须重新上传导致前功尽弃； 设置了webconfig和iis后还是不能上传成功； 不想使用FTP，只想用http。 我们这里只讲分片上传，至于断网续传和秒传已经写好Dem...
c#.net WebUploader 分片上传
weixin_45525177的博客
05-27 340
以ASP.NET Core WebAPI作后端API，用Vue构建前端页面，用Axios从前端访问后端API ,包括文件的上传和下载。 准备文件上传的API #region文件上传可以带参数 [HttpPost("upload")] public JsonResult uploadProject(IFormFile file, string userId) { if (file != nul...
.NetCore WebUploader 实现大文件分片上传
csdn_aspnet的专栏
06-08 435
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。项目要求通过网站上传大文件，比如视频文件，通过摸索实现了文件分片来上传，然后后台进行合并。采用大文件分片并发上传，极大的提高了文件上传效率。希望以上代码可以对您有所帮助。
asp.net mvc webuploader
最新发布
08-14
首先，ASP.NET MVC 是一种基于模型-视图-控制器（MVC）的框架，适用于构建 Web 应用程序。它提供了一种分离关注点的架构模式，使开发人员能够更好地组织和管理代码。 WebUploader 是一个 JavaScript 插件，可以实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值