随笔 - 45  文章 - 0  评论 - 11  阅读 - 15万

C# fileUpload视频上传

要实现大文件上传必须配置webConfig例如:

复制代码
<system.web>
<compilation debug="true" targetFramework="4.5" />
<!--<httpRuntime targetFramework="4.5" />-->
<httpRuntime targetFramework="4.5" maxRequestLength="1073741824" executionTimeout="3600" />
</system.web>

<system.webServer>
<security>
<requestFiltering>
<!--修改服务器允许最大长度-->
<requestLimits maxAllowedContentLength="1073741824"/> 
</requestFiltering> 
</security> 
</system.webServer>
复制代码

index页面

运用jQuery-file-Upload需要引用以下js

jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery File Upload Demo</title>
    <link rel="stylesheet" href="~/JS/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="~/CSS/fileupload.css">
    <script src="~/JS/jQuery.js"></script>
    <style>
        img {
            max-width:50px;
            overflow:hidden;
            margin:30px;
        }
        li {
            list-style:none;
        }
        .progress {
            width: 350px;
            margin-left: 76px;
            margin-top: -90px;
            display:none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>jQuery File Upload Demo</h1>
        <br>
        <div class="row fileupload-buttonbar">
            <div class="col-lg-12">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Add files...</span>
                    <input type="file" id="fileupload"  name="files" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span id="Start">Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span id="Cancle">Cancel upload</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span id="Delete">Delete</span>
                </button>
                <input type="checkbox" class="toggle">
                    
                <div class="container">                   
                    <div class="row" id="imglist">
                        <img id="preview" src="" width="60" height="60" />
                    </div>
                    <div class="progress">
                        <div class="progress-bar" style="width: 0%;">
                        </div>
                    </div>
                </div>
               
            </div>
        </div>
    </div>
</body>
复制代码
复制代码
 <script type="text/javascript">
            $('#fileupload').fileupload({
                url: "/Home/img",
                Type: "POST",
                dataType: 'json',
                autoUpload: true,
                acceptFileTypes: "/(\.|\/)(gif|jpe?g|png|xlsx|mp4)$/i",
                add: function (e, data)
                {
                    $("#Start").click(function () {
                        data.submit();                       
                    })
                },
                success:function(response, status)
                {
                    var obj = JSON.parse(response);
                    var imgPath = obj["filePath"];
                    $("#imglist").append('<li><img src="' + imgPath + '" /> </li>');                    
                   
                },
                done: function (e, data) {                 
                    alert("upload finish");                 
                },
                error: function (error) {
                    alert("error");          
                },
                progressall: function (e, data) { //进度条显示
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('.progress .progress-bar').css(
                        'width',
                        progress + '%'
                        );
                    $('.progress-bar').html(
                        progress + '%'
                        );
                    $('.progress ').css(
                        'display',
                        'block'
                        );                   
                }
            });       
    </script>
复制代码

Controller

复制代码
public JsonResult img(HttpPostedFileBase files)//, string deviceCode, string type
        {
            try
            {
                string localPath = "/uploads/images/" + DateTime.Now.ToString("yyyyMMdd");
                string path = Server.MapPath("~" + localPath);
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }
                TimeSpan ts = DateTime.Now - TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970, 1, 1));
                string fileName = (long)ts.TotalMilliseconds + Path.GetExtension(files.FileName);
                files.SaveAs(path + "/" + fileName);
                return Json("{\"filePath\":\"" + localPath + "/" + fileName + "\",\"sourePath\":\"" + files.FileName + "\"}");

            }
            catch (Exception ex)
            {
                return null;
            }
        }
复制代码

 

posted on   沫丶灬沫  阅读(3245)  评论(2编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示