tnblog
首页
视频
资源
登录

文件上传选择单类型和多类型上传(可上传音乐,视频,图片,文档)

6730人阅读 2020/5/23 15:23 总访问:185230 评论:0 收藏:0 手机
分类: .Net

HTML:



  1. ```handlebars
  2. <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
  3. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  4.     <legend>文件上传多样化</legend>
  5. </fieldset>
  6. <div class="layui-upload">
  7.     <button type="button" class="layui-btn layui-btn-normal" id="SelectFile">选择文件</button>
  8.     <button type="button" class="layui-btn"    id="btnUpload">开始上传</button>
  9. </div>
  10. ```


js  代码:


```csharp

  1. <script src="~/Content/layui/layui.js"></script>
  2. <script>
  3.     layui.use('upload'function (e{
  4.         var $ = layui.jquery
  5.             , upload = layui.upload;
  6.          //执行实例
  7.           
  8.         upload.render({
  9.             elem'#SelectFile'
  10.             , url'/Excle/fileUpload' //改成您自己的上传接口 
  11.             ,type'POST'                 //上传方式 
  12.             , dataType'JSON'            //上传格式
  13.             ,cachefalse                  // 不缓存
  14.             ,processDatafalse       // jQuery不要去处理发送的数据
  15.             , contentTypefalse           // jQuery不要去设置Content-Type请求头
  16.             , size10000                   //传输不能超过10M
  17.             , exts'jpg|png|gif|xls|xlsx|doc|ppt|exe|pptx|'        //可传输文件的后缀
  18.             , accept'file'              //video audio images  excle 
  19.             //, data: { Parm1: "hello", Parm2: "world" }    //额外传输的参数
  20.             //, headers:{token:'sasasasa'}                   //额外添加的请求头
  21.             , autofalse                                 //自动上传,默认是打开的
  22.             , multiplefalse                             //多文件上传(当为true是多文件上传,false时单文件上传)
  23.             //, number: 100                               //multiple:true时有效  (上传数量)
  24.             , bindAction'#btnUpload'                     //auto为false时,点击触发上传
  25.             , beforeSendfunction (info{                 //上传前回调
  26.                 console.log(info);
  27.             console.log("正在进行,请稍候");
  28.      }  
  29.             , donefunction (res{                       //成功上传时回调
  30.                 layer.msg('上传成功');
  31.                 console.log(res)
  32.             }
  33.             , errorfunction ({                         //传输失败的回调
  34.                     //请求异常回调
  35.                 }
  36.         });
  37.     });
  38. </script>

```


后台:


```cpp

  1.  public ActionResult fileUpload()
  2.         {
  3.             if (Request.Files.Count > 0
  4.             { 
  5.                 //取出第一个文件
  6.                 var file = Request.Files[0]; 
  7.                 //取出用户上传的文件名
  8.                 String filename = file.FileName;
  9.                 if (!String.IsNullOrWhiteSpace(filename))
  10.                 {
  11.                     string suf = filename.Substring(filename.LastIndexOf('.'));
  12.                     string newfilename = DateTime.Now.ToString("yyyy年MM月dd日HH时mm分s秒") + suf;
  13.                     String url = Server.MapPath("~/Excle/" + newfilename);
  14.                     file.SaveAs(url);
  15.                     string result = newfilename;
  16.                     return Json(new { code = 200, excle_fileName = result });
  17.                 }
  18.             }
  19.             return Json(new { code = 500 });
  20.         }

```




输出效果:


上传后的结果:


哪里有问题可以问我哦!


评价

C ?、?? 问号和2个问号的用法类型?、对象?

C# ?C# ???:单问号1.定义数据类型可为空。可用于对int,double,bool等无法直接赋值为null的数据类型进行null的赋值如这...

Python实例 1-日志抓取处理 补错附日志小技巧

有时候数据出了问题,可以从日志中恢复数据(如果你没记日志..没备份..→_→..)一、日志展示介绍个平常自己用的小方法,如...

C 数组拆分泛型

主要用到了泛型。泛型是c#2.0的一个新增加的特性,它为使用c#语言编写面向对象程序增加了极大的效力和灵活性。不会强行对值...

MySQL 视图的增删改 查

要显示视图的定义,需要在SHOWCREATEVIEW子句之后指定视图的名称, 我们先来创建几张表,完事后在进行演示:--用户信息表...

使用NPOI导出excel包括图片

Excl模板导出相信我们都会,那么模板上要导出图片呢?嗯~还是来个例子:准备工作:首先要引用NPOI包:然后获取数据集(我这...

ajaxSubmit异步上传图片外面都是假的

引用代码&lt;scriptsrc=&quot;/Scripts/jquery.form.js&quot;&gt;&lt;/script&gt;js就在旁边img链接中,只不过大小为0x0,...

.NET MVC 使用百度编辑器详细教程:1配置编辑器

一、什么是百度编辑器百度编辑器UEditor是由百度web前端研发部开发一款应用于网站的编辑器,具有轻量,可定制,注重用户体...

使用jquery操作元素的css样式获取、修改等等

使用jquery操作元素的css样式(获取、修改等等) //1、获取和设置样式 $(&quot;#tow&quot;).attr(&quot;class&quot;)...

.net辗转java系列视野

.net辗转java系列(一)视野.net系java系其它语言C#Java框架.net Framework Standardjava se.net corejava eejave meJava S...

.NET MVC json对象或者json对象数组的序列化和反序列化

1、用JSON.stringify()将对象stuarr或者json数组stuarr序列化成字符串,然后提交给后台。$.post(&quot;/home/DoUpdate&quot...

.NET MVC json对象或者json对象数组的序列化和反序列化

1、用JSON.stringify()将对象stuarr或者json数组stuarr序列化成字符串,然后提交给后台。$.post(&quot;/home/DoUpdate&quot...

mui框架-移动端跳转以及传值的简单方法修改解决方法

纠结了两天的MUI跳转的问题,终于解决了 ,现在分享给大家,希望大家有什么坑的解决也给我分享分享 哈哈,废话不多说,上代...

MVC全局异常处理错误日记

1、在Filter文件夹中创建一个IsExceptionFilter类(类名随意取)2、使用3、在访问的页面控制器中添加几个错误4、在IsExcept...

MVC全局异常处理错误日记

1、在Filter文件夹中创建一个IsExceptionFilter类(类名随意取)2、使用3、在访问的页面控制器中添加几个错误4、在IsExcept...

Hbuilder打包APP的教程会操作的略过

首先项目必须是APP端的,可能讲解有点啰嗦,讲解准备的工具:HBuilderX(其他版本也可以,这里用X版本来讲解)、待测试手机...
人若没梦想,那跟咸鱼有啥样
排名
20
文章
32
粉丝
7
评论
21
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术
生命在于折腾,长寿源于静止。