图片上传

@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/jquery-cookie-92b7715/jquery.cookie.js"></script>
<h2>Index</h2>
<form action="http://localhost:5307/api/Default/Export1" method="get">
<input type="submit" value="导出" />
</form>
<input id="btn_Add" type="button" value="添加" onclick="Add()"/>
<table class="table table-bordered">
<tr>
<td>姓名</td>
<td>密码</td>
<td>图片</td>
<td>操作</td>
</tr>
<tbody id="tb"></tbody>
</table>
<div id="fen">

</div>
<div>
<input type="file" id="f1" />
<input type="button" value="上传" onclick="ff()" />
</div>

<script>
var q = document.cookie;
alert(q);
load(1);

function load(index) {
$.ajax({
url: 'http://localhost:5307/api/Default/GetUserInfo',
dataType: 'json',
type: 'get',
data: { pageindex: index, pagesize: 2 },
success: function (data) {
$("#tb").empty();
$(data.UserInfos).each(function () {
$("#tb").append('<tr>'
+ '<td>' + this.UserName + '</td>'
+ '<td>' + this.UserPwd + '</td>'
+ '<td><img src="http://localhost:5307/' + this.Img + '" alt="" width="30" height="30"/></td>'
+ '<td></td>'
+ '</tr>')
})
$("#fen").empty();
for (var i = 1; i <= data.Pages; i++) {
$("#fen").append(
"<input type='button' value='" + i + "' onclick='load(" + i + ")'/>"
)
}
}
})
}

function ff() {
var formData = new FormData();
var file = document.getElementById("f1").files[0];
formData.append("fileInfo", file);
$.ajax({
url: "http://localhost:5307/api/Default/UpLoad",
type: "POST",
data: formData,
contentType: false,//必须fals才自动加上正确的Content-Type
processData: false,//必须fals才避开jQuery对 formdata 的默认处XMLHttpRequest会对 formdata 进行正确的理
success: function (data) {
if (data.Code < 0)
alert(data.Msg)
else
alert(data.Url)
},
error: function (data) {
alert("上传失败！");
}
});
}

function Add() {
location.href = "/Default/Add";
}

</script>