zoukankan      html  css  js  c++  java
  • web 表单方式上传文件方法(不用flash插件)

    原理:使用表单的input type="file"标签,通过ajax提交表单请求,后台获取请求中的文件信息,进行文件保存操作

    由于我测试用的做了一个上传文件和上传图片方法,所以我有两个请求方法

    1、html页面

    1)图片上传页面

    @{
        ViewBag.Title = "Images";
    }
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>上传文件测试</title> 
    </head>
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="~/Scripts/com.Upload.js"></script>
    <script>
            var uploadClick = function () {
                //1、调用上传附件方法
                var dts = coms.doUploadImage();
                //将返回格式解析成json对象
                var result = JSON.parse(dts);
                //2、调用保存附件信息方法
                  
                //3、输出提示信息
                if (result.Success) {
                    //获取文件相关信息(文件名、文件大小、文件路径等)
                    var array = result.Data;
                    //根据返回文件信息和页面数据,组成ajax请求,保存文件信息到数据库中
                    alert("图片上传成功"+ array.length +"");
    
                } else {
                    alert("图片上传失败!");
                }
            }
    
    </script>
    
    <style type="text/css">
        .clear {
            clear: both;
            display: block;
            overflow: hidden;
            visibility: hidden;
            width: 0;
            height: 0;
        }
    </style>
    
    <body>
        <div id="master">
            <form id="uploadForm">
                <div style="margin: 20px 0px -20px 20px;250px;">
                    <div  style="30%;margin-top:15px;">图片上传:</div>
                    <div style="60%;margin-top:15px;">
                        <input id="doc" type="file" name="Picture" multiple="multiple" onchange="javascript:coms.setImagePreviews()" accept="image/*" />
                    </div>
                </div>
                <div class="clear"></div>
    
                <!-- 存放预览图片的区域 -->
                <div id="dd" style="margin-left: 5%;auto;margin-top:50px;"></div>
                <div class="clear"></div>
    
                <div  style="position: absolute; 100%;margin-top: 10px;font-weight: bolder;">
                    <a  href="javascript:uploadClick()" >上传</a>
                </div>
            </form>
        </div>
    </body>
    </html>

    2)上传文件页面

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>上传文件测试</title>
    </head>
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="~/Scripts/com.Upload.js"></script>
    <script>
            var uploadClick = function () {
                //1、调用上传附件方法
                var dts = coms.doUploadFile();
                //将返回格式解析成json对象
                var result = JSON.parse(dts);
                //2、调用保存附件信息方法
    
                //3、输出提示信息
                if (result.Success) {
                    //获取文件相关信息(文件名、文件大小、文件路径等)
                    var array = result.Data;
                    //根据返回文件信息和页面数据,组成ajax请求,保存文件信息到数据库中
                    alert("文件上传成功"+ array.length +"");
    
                } else {
                    alert("文件上传失败!");
                }
            }
    
    </script>
    
    <style type="text/css">
        .clear {
            clear: both;
            display: block;
            overflow: hidden;
            visibility: hidden;
            width: 0;
            height: 0;
        }
    </style>
    
    <body>
        <div id="master">
            <form id="uploadForm">
                <div style="margin: 20px 0px -20px 20px;250px;">
                    <div style="30%;margin-top:15px;">文件上传:</div>
                    <div style="60%;margin-top:15px;">
                        <input id="doc" type="file" name="files"  multiple="multiple" />
                    </div>
                </div>
                <div class="clear"></div>
    
                <div style="position: absolute; 100%;margin-top: 25px;font-weight: bolder;">
                    <a href="javascript:uploadClick()">上传</a>
                </div>
            </form>
        </div>
    </body>
    </html>

    2、com.Upload.js文件内容(自定义)

    var coms = {};
    
    //执行图片上传方法(保存)
    coms.doUploadImage = function () {
        var result;
        var formData = new FormData($("#uploadForm")[0]);
        console.log(formData);
        if (formData == null || formData == undefined) {
            alert("未找到上传图片信息");
            return;
        }
        $.ajax({
            type: "POST",
            url: '/FileUpload/MultiUploadImage',
            data: formData,
            async: false,
            contentType: false,
            processData: false,
            success: function (dts) {
                result = dts;
            }, error: function (res) {
               alert(res.responseText);
            }
        });
        return result;
    }
    
    //执行上传附件方法(保存)
    coms.doUploadFile = function () {
        var result;
        var formData = new FormData($("#uploadForm")[0]);
        console.log(formData);
        if (formData == null || formData == undefined) {
            alert("未找到上传文件信息");
            return;
        }
        $.ajax({
            type: "POST",
            url: '/FileUpload/MultiUploadFile',
            data: formData,
            async: false,
            contentType: false,
            processData: false,
            success: function (dts) {
                result = dts;
            }, error: function (res) {
                alert(res.responseText);
            }
        });
        return result;
    }
    
    //多图片上传预览方法
    coms.setImagePreviews = function (avalue) {
        //获取选择图片的对象
        var docObj = document.getElementById("doc");
        //后期显示图片区域的对象
        var dd = document.getElementById("dd");
        dd.innerHTML = "";
        //得到所有的图片文件
        var fileList = docObj.files;
        //循环遍历
        for (var i = 0; i < fileList.length; i++) {
            //动态添加html元素        
            dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";
            //获取图片imgi的对象
            var imgObjPreview = document.getElementById("img" + i);
    
            if (docObj.files && docObj.files[i]) {
                //火狐下,直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '100px';
                imgObjPreview.style.height = '90px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要以下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);   //获取上传图片文件的物理路径
            }
            else {
                //IE下,使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                //alert(imgSrc)
                var localImagId = document.getElementById("img" + i);
                //必须设置初始大小
                localImagId.style.width = "100px";
                localImagId.style.height = "90px";
                //图片异常的捕捉,防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                }
                catch (e) {
                    alert("您上传的图片格式不正确,请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }
        return true;
    }

    3、控制器页面

     public class HomeController : Controller
        {
    
            /// <summary>
            /// 访问上传图片页面
            /// </summary>
            /// <returns></returns>
            public ActionResult Images()
            {
                return View();
            }
    
            /// <summary>
            /// 访问上传文件页面
            /// </summary>
            /// <returns></returns>
            public ActionResult Files()
            {
                return View();
            }
        }

    4、服务器上传方法

    1)FileUploadController 内容:

      public class FileUploadController : Controller
        {
            #region 多文件上传保存
    
            FileUploadService myService = new FileUploadService();
    
            /// <summary>
            /// 上传多个图片
            /// </summary>
            [HttpPost]       
            public string MultiUploadImage()
            {
                JsonReturn result = new JsonReturn();
                bool flag = false;
                string msg = string.Empty;
                string itemMsg = string.Empty;
                JArray array = new JArray();
    
                int count = 0;
                try
                {
                    //获取所有客户端的表单数据的文件
                    var files = System.Web.HttpContext.Current.Request.Files;
                    if (files.Count > 0)
                    {
                        //循环所有文件信息
                        for (var i = 0; i < files.Count; i++)
                        {
                            var file = files[i];
                            //物理上保存文件信息
                            JObject myFiles = myService.UploadImage(file, ref itemMsg);
                            //如果是空对象时,证明未保存成功
                            if (myFiles == null)
                            {
                                //返回失败状态
                                flag = false;
                                msg = itemMsg;
                                break;
                            }
                            else
                            {
                                //追加到数组中
                                array.Add(myFiles);
                                count++;
                                //返回成功状态
                                flag = true;
                                msg = "上传成功";
                            }
                        }
                    }
                    //返回成功或失败信息
                    result.Success = flag;
                    result.Message = msg;
                    result.Count = count;
                    result.Data = array;
                }
                catch (Exception ex)
                {
                    flag = false;
                    msg = ex.Message;
    
                    //返回失败结果信息
                    result.Success = flag;
                    result.Message = msg;
                    result.Count = count;
                }
                //记得序列化出去
                return JsonConvert.SerializeObject(result);
            }
    
            /// <summary>
            /// 上传多个文件
            /// </summary>
            [HttpPost]
            public string MultiUploadFile(string id)
            {
                JsonReturn result = new JsonReturn();
                bool flag = false;
                string msg = string.Empty;
                string itemMsg = string.Empty;
                JArray array = new JArray();
    
                int count = 0;
                try
                {
                    //获取所有客户端的表单数据的文件
                    var files = System.Web.HttpContext.Current.Request.Files;
                    if (files.Count > 0)
                    {
                        //循环所有文件信息
                        for (var i = 0; i < files.Count; i++)
                        {
                            var file = files[i];
                            //物理上保存文件信息
                            JObject myFiles = myService.UploadFile(file, ref itemMsg);
                            //如果是空对象时,证明未保存成功
                            if (myFiles == null)
                            {
                                //返回失败状态
                                flag = false;
                                msg = itemMsg;
                                break;
                            }
                            else
                            {
                                //追加到数组中
                                array.Add(myFiles);
                                count++;
                                //返回成功状态
                                flag = true;
                                msg = "上传成功";
                            }
                        }
                    }
                    //返回成功或失败信息
                    result.Success = flag;
                    result.Message = msg;
                    result.Count = count;
                    result.Data = array;
                }
                catch (Exception ex)
                {
                    flag = false;
                    msg = ex.Message;
    
                    //返回失败结果信息
                    result.Success = flag;
                    result.Message = msg;
                    result.Count = count;
                }
                //记得序列化出去
                return JsonConvert.SerializeObject(result);
            }
    
            /// <summary>
            /// 定义返回格式
            /// </summary>
            public class JsonReturn
            {
                public JsonReturn() { }
                public JsonReturn(bool bo, string msg)
                {
                    _Success = bo;
                    Message = msg;
                }
                public JsonReturn(bool bo, string msg, int count)
                {
                    _Success = bo;
                    Message = msg;
                    Count = count;
                }
    
                private bool _Success = false;
                /// <summary>
                /// 调用是否成功
                /// </summary>
                public bool Success
                {
                    get { return _Success; }
                    set { _Success = value; }
                }
                /// <summary>
                /// 返回的信息
                /// </summary>
                public string Message { get; set; }
    
                /// <summary>
                /// 返回数量
                /// </summary>
                public int Count { get; set; }
    
                /// <summary>
                /// 返回数据
                /// </summary>
                public object Data { get; set; }
            }
    
            #endregion
        }

    2、FileUploadService的内容

     public class FileUploadService
        {
            #region 文件上传的方法
    
            /// <summary>
            /// 上传单个图片
            /// </summary>
            public dynamic UploadImage(HttpPostedFile file, ref string msg)
            {
                JObject obj = new JObject();
                try
                {
                    string newFileName = string.Empty;
                    string newFilePath = string.Empty;
                    string newFileSize = string.Empty;
    
                    //1、检查上传的文件路径是否存在
                    //获取当前程序集的文件路径
                    string applicationPath = System.AppDomain.CurrentDomain.BaseDirectory.ToString();
                    //获取程序集路径+文件夹路径
                    string toServerPath = applicationPath + "\" + ConfigurationManager.AppSettings["UploadImage"];
                    //拼接上年月文件夹( C:\UploadFiles\201904 )
                    toServerPath = toServerPath + "\" + DateTime.Now.ToString("yyyyMM");
                    //判断服务器文件夹路径是否存在
                    if (!Directory.Exists(toServerPath))
                    {
                        //不存在路径,则创建
                        Directory.CreateDirectory(toServerPath);
                    }
    
                    //2、检查文件的格式 
                    //指定上传文件格式类型
                    string[] fileExts = { ".jpg", ".jpeg", ".gif", ".png", ".bmp", ".ico" };
                    //获取上传文件的后缀名
                    string fileExt = Path.GetExtension(file.FileName).ToLower();
    
                    //只上传包含的文件类型
                    if (fileExts.Contains(fileExt))
                    {
                        //获取新文件名(包含后缀名)
                        newFileName = Guid.NewGuid().ToString() + fileExt;  //file.FileName; 
                        //拼接最终的保存文件路径(C:UploadFiles2019041.jpg)
                        newFilePath = toServerPath + "\" + newFileName;
    
                        //检查保存是否已存在,存在不做保存
                        if (!System.IO.File.Exists(newFilePath))
                        {
                            //3、保存上传的文件
                            file.SaveAs(newFilePath);
                        }
                        //计算文件的大小(转成字符)
                        newFileSize = GetFileSize(newFilePath);   // file.ContentLength; 获取文件的字节
                        //获取相对路径
                        string relatePath = newFilePath.Substring(applicationPath.Length, newFilePath.Length - applicationPath.Length);
    
                        //返回文件相关信息
                        obj.Add("Old_FileName", file.FileName);
                        obj.Add("FileName", newFileName);
                        obj.Add("FilePath", newFilePath);       //文件全路径
                        obj.Add("FileDirect", relatePath);   //相对路径
                        obj.Add("FileSize", newFileSize);
                        obj.Add("FileExt", fileExt);
                    }
                    else
                    {
                        msg = "上传失败,请选择扩展名为:JPG,JPEG,GIF,PNG,BMP等类型图片!";
                        obj = null;
                    }
                }
                catch (Exception ex)
                {
                    msg = ex.Message;
                    obj = null;
                }
                return obj;
            }
    
            /// <summary>
            /// 上传单个文件
            /// </summary>
            public dynamic UploadFile(HttpPostedFile file, ref string msg)
            {
                JObject obj = new JObject();
                try
                {
                    string newFileName = string.Empty;
                    string newFilePath = string.Empty;
                    string newFileSize = string.Empty;
    
                    //1、检查上传的文件路径是否存在
                    //获取当前程序集的文件路径
                    string applicationPath = System.AppDomain.CurrentDomain.BaseDirectory.ToString();
                    //获取程序集路径+文件夹路径
                    string toServerPath = applicationPath + "\" + ConfigurationManager.AppSettings["UploadFile"];
                    //拼接年月文件夹
                    toServerPath = toServerPath + "\" + DateTime.Now.ToString("yyyyMM");
                    //判断服务器文件夹路径是否存在
                    if (!Directory.Exists(toServerPath))
                    {
                        //不存在路径,则创建
                        Directory.CreateDirectory(toServerPath);
                    }
    
                    //2、检查文件大小是否超过
                    int filebyte = file.ContentLength;    //单位kb(字节)
                    string conSize = ConfigurationManager.AppSettings["UploadFileSize"];
                    int conbyte = Convert.ToInt32(conSize) * 1000 * 1000;
                    if (filebyte > conbyte)
                    {
                        msg = string.Format("上传失败,上传文件超过最大限制{0}MB!", conSize);
                        obj = null;
                    }
                    else
                    {
                        //3、保存上传的文件                  
                        //上传文件筛选掉图片格式
                        string[] fileExts = { ".jpg", ".jpeg", ".gif", ".png", ".bmp", ".ico" };
                        //获取上传文件的后缀名
                        string fileExt = Path.GetExtension(file.FileName).ToLower();
                        if (fileExts.Contains(fileExt))
                        {
                            msg = "上传失败,上传附件不包含图片格式!";
                            obj = null;
                        }
                        else
                        {
                            //获取新文件名(包含后缀名)
                            newFileName = Guid.NewGuid().ToString() + fileExt;   //file.FileName; 
                            //拼接最终的保存文件路径(C:UploadFiles2019041.jpg)
                            newFilePath = toServerPath + "\" + newFileName;
                            //检查保存是否已存在,存在不做保存
                            if (!System.IO.File.Exists(newFilePath))
                            {
                                //3、保存上传的文件
                                file.SaveAs(newFilePath);
                            }
                            //计算文件的大小(转成字符)
                            newFileSize = GetFileSize(newFilePath);
                            //获取相对路径
                            string relatePath = newFilePath.Substring(applicationPath.Length, newFilePath.Length - applicationPath.Length);
    
                            //4、返回文件相关信息
                            obj.Add("Old_FileName", file.FileName);
                            obj.Add("FileName", newFileName);
                            obj.Add("FilePath", newFilePath);    //文件全路径
                            obj.Add("FileDirect", relatePath);   //相对路径
                            obj.Add("FileSize", newFileSize);
                            obj.Add("FileExt", fileExt);
                        }
                    }
                }
                catch (Exception ex)
                {
                    msg = ex.Message;
                    obj = null;
                }
                return obj;
            }
    
            /// <summary>
            /// 获取文件的大小
            /// </summary>
            /// <param name="sFileFullName"></param>
            /// <returns></returns>
            public string GetFileSize(string sFileFullName)
            {
                FileInfo fiInput = new FileInfo(sFileFullName);
                double len = fiInput.Length;
    
                string[] sizes = { "B", "KB", "MB", "GB" };
                int order = 0;
                while (len >= 1024 && order + 1 < sizes.Length)
                {
                    order++;
                    len = len / 1024;
                }
                string filesize = String.Format("{0:0.##} {1}", len, sizes[order]);
                return filesize;
            }
    
            #endregion
        }

    5、webconfig配置

    1)在<appSettings>下添加如下配置

        <!--保存上传图片文件夹 -->
        <add key="UploadImage" value="UploadImages"/>
        <!--保存上传附件文件夹 -->
        <add key="UploadFile" value="UploadFiles"/>
        <!--保存上传附件最大大小,单位MB-->
        <add key="UploadFileSize" value="4"/>

    配置文件和图片保存的文件夹名称,及上传文件时的最大上传

    2)在<system.web>下添加如下配置

     <!--最大请求长度,单位为KB(千字节),默认为4M,设置为1G,上限为2G -->
     <httpRuntime maxRequestLength="1048576" executionTimeout="3600" targetFramework="4.5"  />

    3)在<system.webServer>下添加如下配置

     <!--允许上传文件长度,单位字节(B),默认为30M,设置为1G,最大为2G -->
        <security>
           <requestFiltering>
            <requestLimits maxAllowedContentLength="1073741824"/>
          </requestFiltering>
        </security>

    解决程序默认上传最大4M的配置

    6、上传效果图

    1)存放文件路径(运行项目下的文件)

    2)图片预览效果

    3)上传图片效果

    7、web上传文件Demo下载

    链接:https://pan.baidu.com/s/1QKpleoVdJ6sAhLIeNJSUZg
    提取码:avcc

  • 相关阅读:
    HDU 1114 Piggy-Bank
    HDU 2955 Robberies
    NTOJ 290 动物统计(加强版)
    POJ 3624 Charm Bracelet
    HDU 2602 Bone Collector
    POJ 1523 SPF(无向图割顶)
    HDU 5311 Hidden String
    HDU 1421 搬寝室
    HDU 1058 Humble Numbers
    POJ 3259 Wormholes(spfa判负环)
  • 原文地址:https://www.cnblogs.com/xielong/p/10906331.html
Copyright © 2011-2022 走看看