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 = "图片上传失败，请稍后再试~" }); } }
后台能保存到本地文件了，其它的操作就简单了。
