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

HTML:

<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>文件上传多样化</legend>
</fieldset>

<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="SelectFile">选择文件</button>
    <button type="button" class="layui-btn"    id="btnUpload">开始上传</button>
</div>

js 代码:

<script src="~/Content/layui/layui.js"></script>
<script>
    layui.use('upload', function (e) {
        var $ = layui.jquery
            , upload = layui.upload;
         //执行实例
          
        upload.render({
            elem: '#SelectFile'
            , url: '/Excle/fileUpload' //改成您自己的上传接口 
            ,type: 'POST'                 //上传方式 
            , dataType: 'JSON'            //上传格式
            ,cache: false                  // 不缓存
            ,processData: false       // jQuery不要去处理发送的数据
            , contentType: false           // jQuery不要去设置Content-Type请求头
            , size: 10000                   //传输不能超过10M
            , exts: 'jpg|png|gif|xls|xlsx|doc|ppt|exe|pptx|'        //可传输文件的后缀
            , accept: 'file'              //video audio images  excle 
            //, data: { Parm1: "hello", Parm2: "world" }    //额外传输的参数
            //, headers:{token:'sasasasa'}                   //额外添加的请求头
            , auto: false                                 //自动上传,默认是打开的
            , multiple: false                             //多文件上传(当为true是多文件上传,false时单文件上传)
            //, number: 100                               //multiple:true时有效  (上传数量)
            , bindAction: '#btnUpload'                     //auto为false时,点击触发上传
            , beforeSend: function (info) {                 //上传前回调
                console.log(info);
		            console.log("正在进行,请稍候");
		     }  
            , done: function (res) {                       //成功上传时回调
                layer.msg('上传成功');
                console.log(res)
            }
            , error: function () {                         //传输失败的回调
                    //请求异常回调
                }

        });
    });
</script>

后台:

 public ActionResult fileUpload()
        {
            if (Request.Files.Count > 0) 
            { 
                //取出第一个文件

                var file = Request.Files[0]; 

                //取出用户上传的文件名

                String filename = file.FileName;

                if (!String.IsNullOrWhiteSpace(filename))

                {
                    string suf = filename.Substring(filename.LastIndexOf('.'));
                    string newfilename = DateTime.Now.ToString("yyyy年MM月dd日HH时mm分s秒") + suf;

                    String url = Server.MapPath("~/Excle/" + newfilename);
                    file.SaveAs(url);
                    string result = newfilename;
                    return Json(new { code = 200, excle_fileName = result });
                }

            }
            return Json(new { code = 500 });
        } 

输出效果:

在这里插入图片描述
上传后的结果:

在这里插入图片描述
哪里有问题可以问我哦!

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你的美,让我痴迷

你的好,我会永远记住你的。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值