Loading...   在项目中可能会涉及到文件上传的功能，今天这篇文章就是教你如何在asp.net中如何实现文件上传的功能，现在我们就从新建项目开始。**文章中设计的资料，在文章末尾均有提供下载。** ## 新建项目   打开Visual Studio软件，新建Asp.net Web应用程序。项目名称以及项目存放路径自己定义即可。 ## 下载WebUploader插件   访问WebUploader官网：[访问](http://fex-team.github.io/webuploader/)，官网提供帮助文档、演示案例以及插件下载。[（点击下载）](https://www.jbea.cn/usr/uploads/2022/01/3994302854.zip) ## 导入插件   插件下载后，在mvc项目中导入插件。 选择项目，右键 - 新建文件夹 - 输入文件夹名称"js" - 将解压出来的文件夹拷贝到js文件夹下   插件导入至项目后，现在开始创建控制器编写文件上传的处理逻辑。 ## 创建控制器   新建控制器：FileUploadController.cs，代码如下所示： ```csharp using System; using System.IO; using System.Linq; using System.Web; using System.Web.Mvc; namespace FileUploadDemo.Controllers { /// <summary> /// 文件上传控制器 /// </summary> public class FileUploadController : Controller { /// <summary> /// 单文件上传（图片） /// </summary> /// <returns></returns> [ActionName("upload-image")] public ActionResult UploadFile(HttpPostedFileBase file) { var temp = file; if (file != null && temp.ContentLength > 0) { //获取文件扩展名 var suffix = System.IO.Path.GetExtension(temp.FileName); //限制提交的格式 string[] imgSuffix = { ".jpg", ".jpeg", ".png" }; if (!imgSuffix.Contains(suffix)) { return Json("上传图片不在限定范围内，请重新选择！", JsonRequestBehavior.AllowGet); } //限制提交大小 var fStream = temp.InputStream; if (fStream.Length > 4194304) { return Json("图片大小不能大于" + 4194304 / 1024 / 1024 + "M！", JsonRequestBehavior.AllowGet); } //将图片流位置改至起点 fStream.Position = 0; var fileLength = temp.ContentLength; byte[] bytes = new byte[fileLength]; fStream.Read(bytes, 0, fileLength); //修改文件名称，使用guid命名【此处可以修改】 var fileName = string.Concat(Guid.NewGuid(), suffix); //保存文件 var res = SaveFile(fileName, bytes); //返回结果 return Json(res, JsonRequestBehavior.AllowGet); } else { return Json("错误数据，请尝试重试！", JsonRequestBehavior.AllowGet); } } /// <summary> /// 保存文件 /// </summary> /// <param name="fileName">文件名称</param> /// <param name="bytes">文件流</param> /// <returns>1：上传失败 0xxxxx.xxx：上传成功</returns> private string SaveFile(string fileName, byte[] bytes) { try { //获取服务器中的file文件夹，将上传的文件保存到此目录 string path = Server.MapPath("~/file/" + fileName); //创建一个文件流 FileStream fs = new FileStream(path, FileMode.Create); //将byte数组写入文件中 fs.Write(bytes, 0, bytes.Length); //所有流类型都要关闭流，否则会出现内存泄露问题 fs.Close(); return "0" + fileName; //返回上传之后的文件名称，前缀0表示上传成功 } catch (Exception ex) { return "1"; //返回1则表示上传失败 } } } } ``` ## 创建测试页面 新建页面：Index.cshtml，页面代码如下： ```html @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>文件上传Demo</title> <!--导入jQuery插件--> <script src="~/js/jquery-3.6.0.min.js"></script> <!--导入文件上传插件--> <link href="~/js/webuploader-0.1.5/webuploader.css" rel="stylesheet" /> <script src="~/js/webuploader-0.1.5/webuploader.min.js"></script> @* 为了使页面美观，此处使用bootstrap *@ <script src="~/Scripts/bootstrap.js"></script> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <!--初始化文件上传组件--> <script type="text/javascript"> $(function () { //文件上传 var $list = $('#thelist'), //文件上传列表 $btn = $('#ctlBtn'), //文件上传按钮 state = 'pending', //文件上传装填 uploader; uploader = WebUploader.create({ // 不压缩image resize: false, // swf文件路径 swf: '../js/webuploader-0.1.5/Uploader.swf', // 文件上传服务器处理地址 server: '/FileUpload/upload-image', // 文件上传页面元素选择器 pick: '#picker' }); // 当有文件添加进来的时候 uploader.on('fileQueued', function (file) { $list.append('<div id="' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">等待上传...</p>' + '</div>'); }); // 文件上传过程中创建进度条实时显示。 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('p.state').text('上传中'); $percent.css('width', percentage * 100 + '%'); }); //上传成功后的业务处理 uploader.on('uploadSuccess', function (file, res) { //服务器返回了相关的数据，1表示失败，0则表示成功 if (res.substring(0, 1) == "0") { //上传成功 $('#' + file.id).find('p.state').text("文件上传成功"); } else { $('#' + file.id).find('p.state').text(res); } }); // 发成错误 uploader.on('uploadError', function (file) { $('#' + file.id).find('p.state').text('上传出错'); }); // 上传王城 uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').fadeOut(); }); // 状态 uploader.on('all', function (type) { if (type === 'startUpload') { state = 'uploading'; } else if (type === 'stopUpload') { state = 'paused'; } else if (type === 'uploadFinished') { state = 'done'; } if (state === 'uploading') { $btn.text('暂停上传'); } else { $btn.text('开始上传'); } }); // 开始、暂停上传 $btn.on('click', function () { if (state === 'uploading') { uploader.stop(); } else { uploader.upload(); } }); }) </script> <style> .example{ margin: 50px; } /*自定义选择文件的按钮样式*/ .webuploader-pick { display: inline-block; align-self: center; font-weight: 400; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; color: #fff; background-color: #217ce5; border-color: #217ce5; margin: 10px 0; } </style> </head> <body> <h3>上传您的拍摄图片-页面可能需要再美化美化</h3> <div id="uploader" class="example"> <!--用来存放文件信息--> <div id="thelist" class="uploader-list"></div> <div class="btns"> <div id="picker">选择文件</div><i class="fa fa-info-circle tips">请将一个章节的作业整合在一个压缩包中！</i> <button id="ctlBtn" class="btn btn-success">开始上传</button> </div> </div> <div class="layui-form-item"> <p style="line-height:28px">请先选择需要上传的作业文件，选择文件后，点击上传文件按钮即可上传本次作业</p> <p style="line-height:28px">仅支持*.png、*.jpg格式的压缩包文件，文件大小不可超过10MB</p> <p style="line-height:28px">文件上传成功后，系统将保留10天，10天后将被系统删除，且无法找回</p> </div> </body> </html> ``` ## 测试   上传文件之前，需要确保服务器目录中存在“file”文件夹，如果没有的话，文件上传会提示失败。   经过测试，文件上传成功，完整案例下载，请访问下方链接： ## 下载 <div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div> 最后修改：2022 年 01 月 03 日 © 允许规范转载 赞 2 都滑到这里了，不点赞再走！？
1 条评论
太棒了