Layui多圖上傳至后端.NET版

Layui的多圖上傳這方面前端做得還是很到位，今天我們就來使用.NET實現多圖上傳的接口,各位可以改一改代碼拿去用

害 廢話不多說先上HTML

<div class="modal-content">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
		<h4 class="modal-title">上傳圖片</h4>
	</div>
	<div class="modal-body">
		<div class="layui-upload">
			<button type="button" class="layui-btn layui-btn-normal" id="testList">選擇多文件</button><input class="layui-upload-file" type="file" accept="" name="file" multiple="">
			<div class="layui-upload-list">
				<table class="layui-table">
					<thead>
						<tr>
							<th>文件名</th>
							<th>大小</th>
							<th>狀態</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="ProImgByList">
					</tbody>
				</table>
			</div>
			<button type="button" class="layui-btn" id="testListAction">開始上傳</button>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn dark btn-outline" data-dismiss="modal">關閉</button>
	</div>
</div>

來到了 javascript，設置接口添加並監聽事件

<script>
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;

        //多文件列表示例
        var ProImgByList = $('#ProImgByList')
            , uploadListIns = upload.render({
                elem: '#testList'
                , url: '/admin/ashx/upByProImages.ashx' //接口，我們這里定義成了 ashx
                , accept: 'file'
                , multiple: true
                , auto: false
                , bindAction: '#testListAction' //按扭綁定
                , choose: function (obj) {
                    var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列
                    //讀取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td>' + file.name + '</td>'
                            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                            , '<td>等待上傳</td>'
                            , '<td>'
                            , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重傳</button>'
                            , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">刪除</button>'
                            , '</td>'
                            , '</tr>'].join(''));

                        //單個重傳
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });

                        //刪除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //刪除對應的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現同名文件不可選
                        });

                        ProImgByList.append(tr);
                    });
                }
                , done: function (res, index, upload) {
                    if (res.result == 1) { //上傳成功
                        var tr = ProImgByList.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>');
                        tds.eq(3).html(''); //清空操作
                        return delete this.files[index]; //刪除文件隊列已經上傳成功的文件
                    }
                    this.error(index, upload);
                }
                , error: function (index, upload) {
                    var tr = ProImgByList.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上傳失敗[檢查文件名及文件格式]</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
                }
            });

    });
</script>

來到了后端C#/.NET語言的位置 我還是比較喜歡ASHX（一般處理程序）

    /// <summary>
    /// upfiles 的摘要說明
    /// </summary>
    public class upByProImages
    {
        //配置圖片存放的路徑，童鞋們可以修改掉，換成固定也的行，節點
        const string AppSetingName = "UpByProImgFile";

        public void ProcessRequest(HttpContext context)
        {
            #region 驗證是否成功登錄 

            if (false) // 如在后端開啟嚴謹寫法，如沒有請刪除這段判斷 -- !IsAdminLogin()
            {
                JsonResult(context, -99, "管理員未登陸");
            }
            #endregion
            else
            {

                HttpPostedFile files = context.Request.Files["file"];
                if (files == null)
                    JsonResult(context, 0, "未找到文件!");
                string path = context.Server.MapPath(Evan.Common.CommFun.GetAppSetting(AppSetingName));  // Evan.Common.CommFun.GetAppSetting 這個方法讀取存放路徑的，當然這個是不是System自帶的。

                dynamic dyResult = UpLoadFile(files, path);

                if (dyResult != null && dyResult.result == 1)
                {
                    JsonResult(context, 1, "上傳成功!");
                }
                else
                {
                    JsonResult(context, 0, "上傳失敗!");
                }
            }

        }

        public dynamic UpLoadFile(HttpPostedFile files, string path, int _isWater = 0)
        {
            dynamic Result_Ob = new { result = 0, returnval = "上傳失敗！" };

            try
            {
                if (Directory.Exists(path))
                {
                    string es = Path.GetExtension(files.FileName);
                    if (es.ToUpper().StartsWith(".JPG") || es.ToUpper().StartsWith(".PNG"))
                    {
                        string fileurl = path + files.FileName; 

                        if (!File.Exists(fileurl)) //判斷是有該文件
                        {
                            files.SaveAs(fileurl);

                            if (File.Exists(fileurl)) // 可加一些其它安全檢測啥的，檢測圖片安全，如果各位需要現成可以面向百度：IsSecureUpfilePhoto()
                            {
                                //這里可以執行一些其它的操作，比如更新數據庫
                                Result_Ob = new { result = 1, returnval = fileurl };
                            }
                            else
                            {
                                File.Delete(fileurl);
                                Result_Ob = new { result = 0, returnval = "上傳失敗！此文件為惡意文件" };
                            }
                        }

                    }
                }

            }
            catch
            {

            }
            return Result_Ob;
        }
        
        /// <summary>
        /// 輸出json結果 返回2個值 result (輸出succes的值)   returnval (輸出str的值)
        /// </summary>
        /// <param name="context"></param>
        /// <param name="success">是否操作成功,0表示失敗;1表示成功</param>
        /// <param name="str">輸出字符串</param>
        protected void JsonResult(HttpContext context, int success, string str)
        {
            context.Response.Write("{\"result\" :\"" + success.ToString() + "\",\"returnval\" :\"" + str + "\"}");
            context.Response.End();
        }
    }