layui框架学习（42：文件上传模块-上）-Toy模板网

这篇具有很好参考价值的文章主要介绍了layui框架学习（42：文件上传模块-上）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

之前学习asp.net core编程入门教程时结合layui测试过文件上传《基于ASP.Net Core和Layui的多文件上传》，但没有认真学习过layui的文件上传模块，本文开始，计划分两章学习并记录文件上传模块中的属性、事件及函数的使用方法。
layui中的文件上传模块支持单文件上传、多文件上传，基于事件可以实现图片本地预览、上传文件列表等功能。单文件上传最简单的示例如下所示（结合参考文献2和5编写的）。

<button type="button" class="layui-btn" id="test">
 <i class="layui-icon">&#xe67c;</i>上传图片
</button>		
<script>
	layui.use(['upload','layer'], function(){
	  var upload = layui.upload;
	  var layer = layui.layer;
	   
	  var uploadInst = upload.render({
	    elem: '#test' 
	    ,url: 'http://localhost:5098/ECData/UploadFile/'
	    ,done: function(res){
	      layer.alert('文件上传完毕！');	
	    }
	    ,error: function(){
	      layer.alert('文件上传失败！');	
	    }
	  });
	});
</script>

[HttpPost]
public FileUploadResult UploadFile(IFormFile file)
{
    FileUploadResult result = new FileUploadResult();
    result.Code = 0;

    FileInfo fi = new FileInfo(file.FileName);
    string ext = fi.Extension;
    var orgFileName = fi.Name;
    var uploads = @"D:\test\UploadFile";
    var filePath = Path.Combine(uploads, orgFileName);
    using (var stream = new FileStream(filePath, FileMode.Create))
    {
        file.CopyToAsync(stream);
    }

    return result;
}

layui框架学习（42：文件上传模块-上）,网页编程,layui,文件上传模块,upload

基础参数url设置文件上传服务地址，服务接口至少返回code和msg属性，以便判断文件是否上传成功，以触发done或error事件。
基础参数accept设置允许上传的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）。加入accept设置为images，选择文件时选择某一视频文件，则会提示以下信息。
layui框架学习（42：文件上传模块-上）,网页编程,layui,文件上传模块,upload

基础参数acceptMime设置选择文件时弹出的文件选择框中能选择的文件类型，如参考文献2中的示例：acceptMime: ‘image/jpg, image/png’，此时文件选择框只能选择jpg或png图片，而不是向上面的参数那样选完后再判断格式。其效果如下所示（实际测试时jpg格式没有显示，暂时不清楚怎么回事）：
layui框架学习（42：文件上传模块-上）,网页编程,layui,文件上传模块,upload

基础参数exts设置允许上传的文件后缀名，一般结合 accept 参数类设定，如果有多种格式，采用’|'隔开，如jpg|png|gif|bmp|jpeg，提示效果与accept相似，也是选择文件后进行判读。
基础参数auto设置选择文件后是否自动上传，默认值为true，如果为false，则需同时设置基础参数bindAction，用以指定上传按钮。
基础参数size设置文件最大可允许上传的大小，单位 KB。
基础参数multiple设置是否支持上传多个文件，默认值为false，同时基础参数number设置同时可上传的文件数量，默认值为0，不限制数量。
基础参数drag设置是否接受拖拽的文件上传，默认值为true，即将本地文件拖拽到上传按钮处，松开鼠标即可触发文件上传操作。

参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://blog.csdn.net/weixin_43189545/article/details/109722105?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2aggregatepagefirst_rank_ecpm_v1~rank_v31_ecpm-7-109722105-null-null.pc_agg_new_rank&utm_term=asp.net%20core%20layui&spm=1000.2123.3001.4430文章来源地址https://www.toymoban.com/news/detail-678634.html

到了这里，关于layui框架学习（42：文件上传模块-上）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！