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" ></li>
<li class="weui-uploader__file" ></li>
<li class="weui-uploader__file" ></li>
<li class="weui-uploader__file weui-uploader__file_status" >                            <div class="weui-uploader__file-content">
<i class="weui-icon-warn"></i>
</div>
</li>
<li class="weui-uploader__file weui-uploader__file_status" >                            <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" ></li>',
$gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles");
$("change", function (e) {
var src, url = window.URL || window.webkitURL || URL, files = e.target.files;
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
if (url) {
src = ateObjectURL(file);
} else {
src = sult;
}
$uploaderFiles.append($(place('#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
}
});
$("click", "li", function () {
$galleryImg.attr("style", Attribute("style"));
$gallery.fadeIn(100);
});
$("click", function () {
$gallery.fadeOut(100);
});
});
</script>
</body>
</html>
inputtypefile不上传文件  除了其中"⽂件上传"部分，其它为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 = "图⽚上传失败，请稍后再试~" });
}
}
  后台能保存到本地⽂件了，其它的操作就简单了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。