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