zoukankan      html  css  js  c++  java
  • 上传文件

    一:前端页面

    <form method="post" action="/File/UploadFile" enctype="multipart/form-data">
       <input type="file" name="file" multiple="multiple"/>
        <button type="submit">上传文件</button>
    </form>
    

     ps.如果要上传文件,需要将form表单的enctype属性设置为multipart/form-data。

      enctype:编码方式(encode type) 该属性用在将表单中的数据提交到服务器之前对数据进行某种方式的编码。默认是application/x-www-form-urlencoded。

      enctype属性有三种值:

      1. application/x-www-form-urlencoded    在发送前编码所有字符(默认)

      2. multipart/form-data                              不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。

      3. text/plain                                              空格转换为 "+" 加号,但不对特殊字符编码。

    二:后台代码

            [HttpPost]
            public ActionResult UploadFile()
            {
                //首先先获取本次请求中文件的数量
                int filesCount = Request.Files.Count;
                if (filesCount > 0)
                {
                    for (int i = 0; i < filesCount; i++)
                    {
                        HttpPostedFileBase uploadFile = Request.Files[i];
                        //获取上传文件的名字
                        var fileName = uploadFile.FileName;
                        string filePath = Server.MapPath("/UploadFiles/" + fileName);
                        //保存到指定目录中
                        uploadFile.SaveAs(filePath);
                    }
                }
                return View();
            }
    

     这里是以mvc框架为例子。当用户点击提交文件button时,对File控制器中的UploadFile方法进行请求。

    三:简单的无刷新的用户logo保存

     前端

     <form method="post" enctype="multipart/form-data" id="formUpload">
                <img src="" id="user-logo"/>
                <input type="file" name="file" id="input-file"/>
                <p><button type="button">保存图片</button></p>
     </form>
    

      

    js

     $("#input-file").on("change", function () {
            var uploadFormData = new FormData($('#formUpload')[0]);//序列化表单,
            console.log(uploadFormData.values);
           
            $.ajax({
                type: "POST",
                url: "/File/UploadImg",
                data: uploadFormData,
                processData: false,
                contentType: false,
                success: function (data) {
                    alert(data);
                    $("#user-logo").attr("src", data);
                }
    
            });
        });
    

     

    后台

     [HttpPost]
            public JsonResult UploadImg()
            {
                string result="";
                int filesCount = Request.Files.Count;
                if (filesCount > 0)
                {
                    for (int i = 0; i < filesCount; i++)
                    {
                        HttpPostedFileBase uploadFile = Request.Files[i];
                        //获取上传文件的名字
                        var fileName = uploadFile.FileName;
                        string filePath = Server.MapPath("/UploadFiles/" + fileName);
                        result = "/UploadFiles/" + fileName;
                        //保存到指定目录中
                        uploadFile.SaveAs(filePath);
                    }
                }
                return Json(result);
            }
  • 相关阅读:
    Linux系统安装IonCube的方法详解教程
    CentOS7 安装 odoo10
    关于WPF的弹出窗口
    WPF命令使用
    WPF访问UserControl的自定义属性和事件
    一步步实现 Prism + MEF(二)--- 绑定命令
    一步步实现 Prism + MEF(一)--- 搭建框架
    MVVM里绑定TreeView控件的SelectedItem
    MAF框架的使用限制
    排序--归并排序算法
  • 原文地址:https://www.cnblogs.com/MzwCat/p/8471122.html
Copyright © 2011-2022 走看看