@{
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 = "圖片上傳失敗，請稍后再試~" });
}
}
后台能保存到本地文件了，其它的操作就簡單了。