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]);
                    //文件部分
                    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 = "图片上传失败，请稍后再试~" });
            }
        }

　　后台能保存到本地文件了，其它的操作就简单了。

 

posted @ 2020-11-23 21:16  老飞飞  阅读(1184)  评论(0)    收藏  举报