weui-uploader文件上傳


@{
    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]);<br>                    //文件部分
                    formData.append("file", files[i]);<br>                    //其它參數
                    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)
       {<br>            //文件
           HttpPostedFileBase fileData = Request.Files[0];<br>            //其它參數
           string appId = Request["appId"];
           string random = Request["random"];
           string sign = Request["sign"];
           string imgType = Request["imgType"];
           if (fileData != null)
           {
               try
               {<br>                    //保存文件(也可以得到文件流進行處理)
                   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));<br>
                   ///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 = "圖片上傳失敗，請稍后再試~" });
           }
       }

后臺能保存到本地文件了，其它的操作就簡單了。

本文轉自：http://www.rzrgm.cn/wonder223/p/14027122.html

posted @ 2021-08-06 09:40 飛翔的咸魚灬閱讀(733) 評論(0) 收藏舉報

刷新頁面返回頂部

weui-uploader文件上傳

公告