web 表單方式上傳文件方法（不用flash插件）

時間  2019-12-09
標籤 web 表單 方式 上傳 文件 方法 不用 flash 插件 欄目 HTML 简体版
原文   原文鏈接

原理：使用表單的input type="file"標籤，經過ajax提交表單請求，後臺獲取請求中的文件信息，進行文件保存操做javascript

因爲我測試用的作了一個上傳文件和上傳圖片方法，因此我有兩個請求方法css

一、html頁面html

1）圖片上傳頁面java

@{
    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 () {
            //一、調用上傳附件方法
            var dts = coms.doUploadImage();
            //將返回格式解析成json對象
            var result = JSON.parse(dts);
            //二、調用保存附件信息方法
              
            //三、輸出提示信息
            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）上傳文件頁面jquery

<!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 () {
            //一、調用上傳附件方法
            var dts = coms.doUploadFile();
            //將返回格式解析成json對象
            var result = JSON.parse(dts);
            //二、調用保存附件信息方法

            //三、輸出提示信息
            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>

二、com.Upload.js文件內容（自定義）web

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;
}

三、控制器頁面ajax

 public class HomeController : Controller
    {

        /// <summary>
        /// 訪問上傳圖片頁面
        /// </summary>
        /// <returns></returns>
        public ActionResult Images()
        {
            return View();
        }

        /// <summary>
        /// 訪問上傳文件頁面
        /// </summary>
        /// <returns></returns>
        public ActionResult Files()
        {
            return View();
        }
    }

四、服務器上傳方法數據庫

1）FileUploadController 內容：json

  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
    }

二、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;

                //一、檢查上傳的文件路徑是否存在
                //獲取當前程序集的文件路徑
                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);
                }

                //二、檢查文件的格式 
                //指定上傳文件格式類型
                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))
                    {
                        //三、保存上傳的文件
                        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;

                //一、檢查上傳的文件路徑是否存在
                //獲取當前程序集的文件路徑
                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);
                }

                //二、檢查文件大小是否超過
                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
                {
                    //三、保存上傳的文件                  
                    //上傳文件篩選掉圖片格式
                    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))
                        {
                            //三、保存上傳的文件
                            file.SaveAs(newFilePath);
                        }
                        //計算文件的大小（轉成字符）
                        newFileSize = GetFileSize(newFilePath);
                        //獲取相對路徑
                        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);
                    }
                }
            }
            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
    }

五、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的配置

六、上傳效果圖

1）存放文件路徑（運行項目下的文件）

2）圖片預覽效果

3）上傳圖片效果

七、web上傳文件Demo下載

連接：https://pan.baidu.com/s/1QKpleoVdJ6sAhLIeNJSUZg 提取碼：avcc

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程