C#fileUpload视频上传

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Node.js›Node.js教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

要实现大文件上传必须配置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;
            }
        }