web 表单方式上传文件方法（不用flash插件）

时间：2023-07-12 22:48:14

原理：使用表单的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;width:250px;">

                <div  style="width:30%;margin-top:15px;">图片上传：</div>

                <div style="width: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%;width:auto;margin-top:50px;"></div>

            <div class="clear"></div>

            <div  style="position: absolute;width: 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;width:250px;">

                <div style="width:30%;margin-top:15px;">文件上传：</div>

                <div style="width:60%;margin-top:15px;">

                    <input id="doc" type="file" name="files"  multiple="multiple" />

                </div>

            </div>

            <div class="clear"></div>

            <div style="position: absolute;width: 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 = ;

            try

            {

                //获取所有客户端的表单数据的文件

                var files = System.Web.HttpContext.Current.Request.Files;

                if (files.Count > )

                {

                    //循环所有文件信息

                    for (var i = ; 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 = ;

            try

            {

                //获取所有客户端的表单数据的文件

                var files = System.Web.HttpContext.Current.Request.Files;

                if (files.Count > )

                {

                    //循环所有文件信息

                    for (var i = ; 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:\UploadFiles\201904\01.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) *  * ;

                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:\UploadFiles\201904\01.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 = ;

            while (len >=  && order +  < sizes.Length)

            {

                order++;

                len = len / ;

            }

            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）存放文件路径（运行项目下的文件）

web 表单方式上传文件方法（不用flash插件）

2）图片预览效果

web 表单方式上传文件方法（不用flash插件）

3）上传图片效果

web 表单方式上传文件方法（不用flash插件）

7、web上传文件Demo下载

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

相关文章