asp.net mvc 上传和下载功能

上传功能

css文件

<style>
    <style >
    body {
        background-color: #EBEBEB
    }

    .aaa {
        width: auto;
        height: 600px;
        background-color: #CB4F51;
        padding-top: 100px;
        padding: 50px;
        display: block;
    }

    #box {
        width: 800px;
        height: 100px;
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    #file_name {
        width: 400px;
        height: 30px;
    }

    a.input {
        width: 70px;
        height: 30px;
        line-height: 30px;
        background: #3091d1;
        text-align: center;
        display: inline-block; /*具有行内元素的视觉,块级元素的属性 宽高*/
        overflow: hidden; /*去掉的话,输入框也可以点击*/
        position: relative; /*相对定位,为 #file 的绝对定位准备*/
        top: 10px;
    }

        a.input:hover {
            background: #31b0d5;
            color: #ffffff;
        }

    a {
        text-decoration: none;
        color: #FFF;
    }

    #file {
        opacity: 0; /*设置此控件透明度为零,即完全透明*/
        filter: alpha(opacity=0); /*设置此控件透明度为零,即完全透明针对IE*/
        font-size: 100px;
        position: absolute; /*绝对定位,相对于 .input */
        top: 0;
        right: 0;
    }

    #submit {
        opacity: 0; /*设置此控件透明度为零,即完全透明*/
        filter: alpha(opacity=0); /*设置此控件透明度为零,即完全透明针对IE*/
        font-size: 100px;
        position: absolute; /*绝对定位,相对于 .input */
        top: 0;
        right: 0;
    }

    #t_box {
        width: 100%;
        margin-top: 400px;
        margin-bottom: 20px;
        text-align: center;
    }

    #t {
        font-family: "微软雅黑";
        color: darkblue;
    }
</style>****

Form表单提交


<h2>File</h2>
@using (Html.BeginForm("File", "Home", FormMethod.Post,new { enctype = "multipart/form-data" })) {

<div id="box">
    <input type="text" id="file_name" name="file_name" readonly="readonly" value="未选择文件" />
    <a href="javascript:void(0);" class="input">
        浏览
        <input type="file" id="file" name="document[file]">
    </a>
    <a href="javascript:void(0);" class="input">
        上传
        <input type="submit" name="sudmit" id="submit" value="上传" />
    </a>
    <br><br><br>
    <div id="t_box">
         <span id="t">值得信任的内容托管系统-8.49%的可靠性和累积2小时的无障碍运行性</span>
    </div>

</div>

}

<script type="text/javascript">
    $(function(){
        $("#file").change(function(){  // 当 id 为 file 的对象发生变化时
            var fileSize = this.files[0].size;
            var size = fileSize / 1024 / 1024;
            if (size > 5) {
                alert("附件不能大于5M,请将文件压缩后重新上传!");
                this.value="";
                return false;
            } else {

                var arr = $("#file").val().split('\\');
                var fileName = arr[arr.length - 1];
                //   $("#file_name").val($("#file").val());  //将 #file 的值赋给 #file_name
                $("#file_name").val(fileName);  //将 #file 的值赋给 #file_name
            }
        });
        $("form").submit(function(){
            if($("#file").val()==""||$("#file").val()==null){
                alert("未选择文件");
                return false;
            }
        });
    });

</script>

Ajax.BeginForm,原理也是Form表单提交

<p>Ajax.BeginForm</p>
@using(Ajax.BeginForm("SavePictureByForm", null, new AjaxOptions() { OnSuccess = "PostSuc", OnFailure = "PostFail", HttpMethod = "Post"}, new {enctype = "multipart/form-data"}))
{
   <input type="file" name="pic" id="pic" multiple="multiple" />
   <input type="submit" value="提交" />
}

后端处理上传请求

public ActionResult File()
        {
            HttpPostedFileBase file = Request.Files["document[file]"];
            if (file != null) {
                string fileName = Request.Form["file_name"];
                   //  string fileName= DateTime.Now.ToLongDateString().ToString();
                string filePath = Path.Combine(HttpContext.Server.MapPath("../UpLoads/"+fileName));
                file.SaveAs(filePath);
                return RedirectToAction("File","Home");


            }
            ViewBag.Message = "Your contact page.";

            return View();
        }

下载功能

前端html

<h2>File</h2>
@using (Html.BeginForm("DownLoad", "Home", FormMethod.Get, new { enctype = "multipart/form-data" }))
{

    <div id="box">
        <input type="text" id="file_name" name="fileName"  value="未选择文件" />

        <a href="javascript:void(0);" class="input">
            下载
            <input type="submit" id="submit" value="下载" />
        </a>
        <br><br><br>
        <div id="t_box">
            <span id="t">值得信任的内容托管系统-8.49%的可靠性和累积2小时的无障碍运行性</span>
        </div>

    </div>

}

<script type="text/javascript">

    $(function(){

        $("form").submit(function(){
            if($("#file_name").val()==""||$("#file_name").val()==null){
                alert("输入你想获得文件");
                return false;
            }
        });
    });

</script>

后端处理下载请求

public ActionResult DownLoad(string fileName) {
            //  string absoluFilePath = Server.MapPath(System.Configuration.ConfigurationManager.AppSettings["AttachmentPath"] + filePath);
            if (fileName != null) {
                string filePath = Path.Combine(HttpContext.Server.MapPath("../UpLoads/" + fileName));
                return File(new FileStream(filePath, FileMode.Open), "application/octet-stream", Server.UrlEncode(fileName));
            }
            return View();

        }
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值