weui-uploader檔案上傳部分

阿新 • • 發佈：2020-11-23

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/weui/weui.css" rel="stylesheet" />
</head>
<body>
    <div class="weui-cells_form">

        <div class="weui-cell__bd">
            <div class="weui-uploader">
                <div class="weui-uploader__hd">
                    <p class="weui-uploader__title">圖片上傳</p>
                    <div class="weui-uploader__info">0/2</div>
                </div>
                <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles">
                        <li class="weui-uploader__file" style="background-image: url(/Content/imgs/ulite.jpg);"></li>
                        <li class="weui-uploader__file" style="background-image: url(/Content/imgs/ulite.jpg);"></li>
                        <li class="weui-uploader__file" style="background-image: url(/Content/imgs/ulite.jpg);"></li>
                        <li class="weui-uploader__file weui-uploader__file_status" style="background-image: url(/Content/imgs/ulite.jpg);">
                            <div class="weui-uploader__file-content">
                                <i class="weui-icon-warn"></i>
                            </div>
                        </li>
                        <li class="weui-uploader__file weui-uploader__file_status" style="background-image: url(/Content/imgs/ulite.jpg);">
                            <div class="weui-uploader__file-content">50%</div>
                        </li>
                    </ul>
                    <div class="weui-uploader__input-box">
                        <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Content/weui/weui.mini.js"></script>
    <script>
        $(function () {
            var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
                $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
                $uploaderInput = $("#uploaderInput"),
                $uploaderFiles = $("#uploaderFiles");

            $uploaderInput.on("change", function (e) {
                var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];

                    if (url) {
                        src = url.createObjectURL(file);
                    } else {
                        src = e.target.result;
                    }

                    $uploaderFiles.append($(tmpl.replace('#url#', src)));

                    //檔案上傳begin

                    var formData = new FormData();
                    console.log(files[i]);
                    formData.append("file", files[i]);
                    formData.append("imgType", 1);
                    formData.append("appId", "1111");
                    formData.append("random", "21312");
                    formData.append("sign", "123123");
                    $.ajax({
                        async: true,
                        contentType: false, //頭部請求內容格式
                        dataType: 'json',
                        type: 'post',
                        data:formData,
                        // 告訴jQuery不要去處理髮送的資料
                        processData: false,
                        url: "@Url.Action("ImageUpload", "File")",//後端接收圖片介面
                        success: function(data) {
                            //後端Httpclient請求成功後返回過來的結果
                            console.log(data);
                        }
                    });
                    //檔案上傳End
                   
                }
            });
            $uploaderFiles.on("click", "li", function () {
                $galleryImg.attr("style", this.getAttribute("style"));
                $gallery.fadeIn(100);
            });
            $gallery.on("click", function () {
                $gallery.fadeOut(100);
            });
        });
    </script>
</body>
</html>

　　除了其中"檔案上傳"部分，其它為weui-uploader的示例程式。

有些時候還是必須傳入其它引數的，儲存資料庫時才知道這個附檔關聯到哪個文件中。

 [HttpPost]
        public JsonResult ImageUpload(FormContext context)
        {
            HttpPostedFileBase fileData = Request.Files[0];
            string appId = Request["appId"];
            string random = Request["random"];
            string sign = Request["sign"];
            string imgType = Request["imgType"];
            if (fileData != null)
            {
                try
                {
                    string fileName = Path.GetFileName(fileData.FileName);//原始檔名稱
                    string fileExtension = Path.GetExtension(fileName).ToLower();
                    string newFileName =Guid.NewGuid().ToString().Replace("-", "")+fileExtension;
                    fileData.SaveAs(Server.MapPath("~/upload/" + newFileName));
                    ///to do list 儲存到資料庫 今天就不玩了





                    return Json(new { code = 1, list = newFileName, msg = "上傳成功~" });
                }
                catch (Exception ex)
                {
                    return Json(new { code = 0, msg = ex.Message });
                }
            }
            else
            {
                return Json(new { code = 0, msg = "圖片上傳失敗，請稍後再試~" });
            }
        }

　　後臺能儲存到本地檔案了，其它的操作就簡單了。