layui的圖片上傳使用

先上效果圖。

 

在用之前呢，你得先更新最新版的layui版本。經驗之談_(:_」∠)_ 

今天在用的時候，實在是碰到太多的坑，本來是拒絕更新到最新版來着。

首先是layui.js和layui.all.js的問題。這個是什么問題呢！就是layui.js沒有upload.render方法

_(:_」∠)_                              _(:_」∠)_                              _(:_」∠)_ 

於是就在百度搜索了：“layui.js is not found reder” 有答案說用layui.all.js

然后引用layui.all.js，而layui.all.js有render方法卻不會觸發<input type=file的上傳功能。(吐血一波)(￣ー￣)

然后走神了下百度了 “layui.js和layui.all.js的區別” ，然后也不知道怎么回事，反正莫名其妙好了。

好的，那么我就繼續往下。上傳之后圖片不預覽出來。這是自己傻逼，被搞懵了，只是一個layuihide樣式沒刪掉，又吐血一波（樓主最近補血嫌血多，多糖鐵復合膠囊、生血寧片，你值得擁有）

就這么用了測試幾回后.......打開windows的upload功能(其實就是<input type=file>打開的那個彈窗)沒用了，回想起來可能是緩存還是怎么滴吧。哎呀，反正也不寫廢話了，中間的波折也就過了。

好，一個上午就這么沒了。

下午上班，更新了最新版后。導入layui.js和 layui/lay/modules/upload.js（我也忘記有沒有用了，反正就導了）完美，不會出現上午的問題了。人吶就是這么傻，能簡單解決的非得找原因解決。

接下來是編寫后台、寫樣式、js調試、添加刪除按鈕以及刪除功能。layui圖片上傳是沒用刪除按鈕的，除非是表格式的，不過區別也不大，只是不太好看。

編寫傳到mvc控制器的后台,emm

 public class UploadFileController : MvcControllerBase
    {
        public ActionResult UploadImg() {
            string resultUrl = "";
            for (int i = 0; i < Request.Files.Count; i++)
            {
                
                resultUrl += Upload(Request.Files[i]);
                if (i<Request.Files.Count-1)
                {
                    resultUrl += ",";
                }
            }
            return Success("上傳成功", resultUrl);
        }

        private string Upload(HttpPostedFileBase postedFile) {
            UploadFiles uf = new UploadFiles();
            string filepath = "images\\Goods\\";
            string path = GetMapPath(filepath);//UploadFile/images/goods/
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }
            var filelength = postedFile.ContentLength;
            string fileExt = GetPostfixStr(postedFile.FileName);
            var fileMaxSize = 307200; //300K
            var fileName = Guid.NewGuid() + "." + fileExt; //返回的上傳后的文件名
            string resultUrl = Config.GetValue("ServerIpHost") + "/UploadFile/images/Goods/" + fileName;//存入數據庫的鏈接
            if (filelength <= fileMaxSize)
            {
                byte[] buffer = new byte[filelength];
                postedFile.InputStream.Read(buffer, 0, filelength);
                postedFile.SaveAs(path + fileName);
            }
            return resultUrl;
        
        }
        /// <summary>
        /// 獲取文件格式名
        /// </summary>
        /// <param name="filename"></param>
        /// <returns></returns>
        private  string GetPostfixStr(string filename)
        {
            int start = filename.LastIndexOf(".");
            int length = filename.Length;
            string postfix = filename.Substring(start + 1);
            return postfix;
        }
        public string GetMapPath(string strPath)
        {
            if (System.Web.HttpContext.Current != null)
            {
                return System.Web.HttpContext.Current.Server.MapPath(strPath);
            }
            else //非web程序引用
            {
                strPath = strPath.Replace("/", "\\");
                if (strPath.StartsWith("\\"))
                {
                    strPath = strPath.Substring(strPath.IndexOf('\\', 1)).TrimStart('\\');
                }
                return System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, strPath);
            }
        }
    }

　寫了兩個圖片上傳，一個是多圖，一個是單圖

   layui.use(['form', 'upload', 'element'], function () {
        var form = layui.form
            , layer = layui.layer;
        var upload = layui.upload;
        var element = layui.element;
        var $ = layui.jquery;

        //拖拽上傳
        var uploadMain = upload.render({
            elem: '#test10'
            , url: '/UploadFile/UploadImg' //改成您自己的上傳接口
            //, before: function (obj) {//上傳前觸發
            //    //預讀本地文件示例，不支持ie8
            //    obj.preview(function (index, file, result) {
            //        layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', result);
            //        //$('#demo2').attr('src', result); //圖片鏈接（base64）
            //    });
            //}
            , choose: function (obj) {//選擇后觸發
                var files = this.files = obj.pushFile();
                var view = layui.$('#uploadDemoView');
                //預讀本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    var _html = $(['<div class="divimg" style="float:left;">'
                        , '<img style="max-width: 196px;max-height:200px"  id="viewImg' + index + '" alt="上傳成功后渲染"  src="' + result + '">'
                        , '<div class="divX" >'
                        , '<img src = "/Content/images/ui_close.png" width = "20" height = "20" />'
                        , '</div>'
                        , '</div>'].join(''));
                    _html.find(".divX").on('click', function () {
                        delete files[index]; //刪除對應的文件
                        _html.remove();
                        uploadDetail.config.elem.next()[0].value = '';
                    })

                    layui.$('#uploadDemoView').removeClass('layui-hide');
                    view.removeClass('layui-hide');
                    _html.find(".divX").on('click', function () {
                        delete files[index]; //刪除對應的文件
                        _html.remove();
                        uploadDetail.config.elem.next()[0].value = '';
                    })
                    view.append(_html);
                });
            }
            , auto: false//false將不觸發before
            //, bindAction: "#uploadBtn"
            , size: 300//單位kb
            , done: function (data) {
                if (data.message != "") {
                    layer.msg(data.message);
                }

                if (data.type == 1) {
                    var fileUrl = data.resultdata;
                    $("input[name='mainPic']").val(fileUrl);
                }
                else if (data.type == 3) {
                    return false;
                }
            }
            , progress: function (n, elem) {
                var percent = n + '%' //獲取進度百分比
                element.progress('lodingdemo', percent); //可配合 layui 進度條元素使用
            }
        });
        var uploadDetail;
        //拖拽上傳
        uploadDetail = upload.render({
            elem: '#upDiv2'
            , url: '/UploadFile/UploadImg' //改成您自己的上傳接口
            , choose: function (obj) {//選擇圖片后觸發
                var files = this.files = obj.pushFile();//每次會把新圖片加入集合
　　　　　　　　　　//-----------------圖片數量限制
                var filecount = Object.getOwnPropertyNames(files).length;//這里就不說，做圖片數量限制
                if (filecount > 4) {
                    layer.msg("只能上傳4張");
                    var fileobj = Object.getOwnPropertyNames(files)//
                    $(fileobj).each(function (i, j) {//刪除本次添加的圖片，不刪的話
                        if (i > 3) {
                            delete files[j];
                        }
                    })
                    return false;
                }
　　　　　　　　　　//----------------------------
                var view2 = layui.$('#uploadDemoView2');

                //預讀本地文件示例
                obj.preview(function (index, file, result) {
                    var _html = $(['<div class="divimg" style="float:left;">'
                        , '<img style="max-width: 196px;max-height:200px"  id="viewImg' + index + '" alt="上傳成功后渲染"  src="' + result + '">'
                        , '<div class="divX" >'
                        , '<img src = "/Content/images/ui_close.png" width = "20" height = "20" />'
                        , '</div>'
                        , '</div>'].join(''));

                    view2.removeClass('layui-hide');
                    _html.find(".divX").on('click', function () {
                        debugger;
                        delete files[index]; //刪除對應的文件
                        _html.remove();
                        uploadDetail.config.elem.next()[0].value = '';
                    })
                    view2.append(_html);
                });


            }
            , multiple: true
            // , number: 4//這個是限制一次性選擇4張圖片 反正就不能用，沒卵用
            , auto: false//false將不觸發before
            , size: 300//單位kb
            , done: function (data) {
                if (data.message != "") {
                    layer.msg(data.message);
                }
                if (data.type == 1) {
                    var fileUrl = data.resultdata;
                    $("input[name='detailPic']").val(fileUrl);
                }
                else if (data.type == 3) {
                    return false;
                }
            }
            //, error: function (index, upload) {
            //    //當上傳失敗時，你可以生成一個“重新上傳”的按鈕，點擊該按鈕時，執行 upload() 方法即可實現重新上傳
            //}
            , progress: function (n, elem) {
                var percent = n + '%' //獲取進度百分比
                element.progress('lodingdemo2', percent); //可配合 layui 進度條元素使用
            }
        });
        $("#uploadBtn").click(function () {
            uploadMain.upload();
            uploadDetail.upload();
            return false;
        })
        //自定義驗證規則
//監聽提交
        //表單取值
    });

<style type="text/css">
    .divX {
        position: absolute;
        top: 0px;
        right: 0px;
        text-align: right;
        padding-right: 3px;
        z-index: 200;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        line-height: 10px;
        font-weight: bold;
        cursor: pointer;
        font-size: 10px;
    }

    .divimg {
        max-height: 220px;
        height: 220px;
        width: 258px;
        max-width: 258px;
        background-color: #fff;
        border: 1px dashed #e6e6e6;
        position: relative;
        text-align: center;
    }

        .divimg > img {
            padding-top: 10px;
        }
</style>
<form class="layui-form layui-form-pane" lay-filter="example">
    <input type="hidden" name="mainPic" />
    <input type="hidden" name="detailPic" />
   
    <div class="layui-form-item">
        <button class="layui-btn layui-btn-normal layui-btn-radius" id="uploadBtn" lay-submit="">開始上傳</button>
    </div>
    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>上傳主圖(300kb內)</legend>
        </fieldset>

        <div class="layui-upload-drag" id="test10">
            <div class="layui-progress" lay-filter="lodingdemo" lay-showpercent="true">
                <div class="layui-progress-bar" lay-percent="0%"></div>
            </div>
            <i class="layui-icon"></i>
            <p>點擊上傳，或將文件拖拽到此處</p>
            <hr />

        </div>
        <div class="layui-hide" id="uploadDemoView">
            @*<img style="max-width: 196px;max-height:200px" id="demo2" alt="上傳成功后渲染" lay-filter="imgfilter" src="">
                <div class="divX " onclick="del(this)">
                    <img src="~/Content/images/ui_close.png" width="20" height="20" />
                </div>*@
        </div>
    </div>
    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>上傳詳情頁(300kb內,最多4張)</legend>
        </fieldset>

        <div class="layui-upload-drag" id="upDiv2">
            <div class="layui-progress" lay-filter="lodingdemo2" lay-showpercent="true">
                <div class="layui-progress-bar" lay-percent="0%"></div>
            </div>
            <i class="layui-icon"></i>
            <p>點擊上傳，或將文件拖拽到此處</p>
            <hr>
        </div>
        <div class="layui-hide" id="uploadDemoView2">
        </div>
    </div>
</form>