WTM框架提供了默认的api , /api/_file/Upload 这个api会读取form中的第一个文件,如果成功会返回文件id和文件名称 。
HTML
<form class="am-form" id="form1" enctype="multipart/form-data">
<div class="am-form-group">
<a href="javascript:;" class="file">
请选择上传照片
<input type="file" name="upfile" id="upfile" class="imgInput">
</a>
<div>
<img src="" class="img" />
</div>
</div>
<p class="am-text-center"><button type="submit" class="am-btn am-btn-danger am-radius am-btn-block">立即注册</button></p>
</form>
JQ
$(".imgInput").change(function () {
$(".img").attr("src", URL.createObjectURL($(this)[0].files[0]));
data = new FormData($('#form1')[0]);
$.ajax({
url: '/api/_file/Upload',
type: 'post',
// 设置的是请求参数
data: data,
// 用于设置响应体的类型 注意 跟 data 参数没关系!!!
dataType: 'json',
processData: false, //不处理发送的数据,因为data值是FormData对象,不需要对数据做处理
contentType: false, //不设置Content-type请求头
success: function (res) {
console.log(res)
},
error: function (xhr) {
alert("账号或密码错误");
},
})
});
返回的数据
{Id: "904932d4-f8eb-47a4-aa0c-413ac3f7231f", Name: "7.png"}
图片展示
直接调用/api/_file/GetFile/{id}接口即可。
图片展示示例:<img src="/api/_file/getfile/094224ad-0146-4d9e-9918-3866aa470531">