WTM(ASP.NET Core)使用JQ图片上传示例

本文主要是介绍WTM(ASP.NET Core)使用JQ图片上传示例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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">

这篇关于WTM(ASP.NET Core)使用JQ图片上传示例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---