剑轩

应无所住,而生其心

博主信息

排名

文章

860

粉丝

112

163

文章类别

CSS 16篇

微服务 41篇

Git 15篇

.NET 106篇

移动开发 33篇

软件架构 26篇

.NET Core 120篇

.NET MVC 11篇

英语 3篇

随笔 106篇

Bootstrap 3篇

Redis 21篇

编辑器 10篇

Js相关 15篇

虚拟化 8篇

AJAX调用webapi上传图片或文件。设置token，设置Authorization Bearer

9611人阅读 2019/6/21 11:51 总访问：5179628 评论：2 收藏：0 手机

分类: .NET MVC

AJAX调用webapi上传图片或文件，并返回刚上传的文件名。废话不多说直接贴代码吧

html相关：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        function doUpload() {
            var formData = new FormData($("#uploadForm")[0]);
            $.ajax({
                url: '/api/upload',
                type: 'post',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (returndata) {
                    alert(returndata);
                },
                error: function (returndata) {
                    alert("报错了");
                    console.log(returndata);
                }
            });
        }
    </script>
</head>
<body>
    <form id="uploadForm">
        <p>无刷新测试： <input type="text" name="filename" value="" /></p>
        <p>上传文件： <input type="file" name="file" /></p>
        <input type="button" value="上传" onclick="doUpload()" />
    </form>
</body>
</html>

webapi相关：

  public async Task<string> Post()
        {
            if (!Request.Content.IsMimeMultipartContent())
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }
            string uploadFolderPath = HostingEnvironment.MapPath("~/Upload");

            //如果路径不存在，创建路径
            if (!Directory.Exists(uploadFolderPath))
                Directory.CreateDirectory(uploadFolderPath);

            string guid = Guid.NewGuid().ToString().Replace("-","");

            List<string> files = new List<string>();
            var provider = new WithExtensionMultipartFormDataStreamProvider(uploadFolderPath, guid);
            try
            {
                // Read the form data.
                await Request.Content.ReadAsMultipartAsync(provider);

                // This illustrates how to get the file names.

                foreach (var file in provider.FileData)
                {//接收文件
                    files.Add(Path.GetFileName(file.LocalFileName));
                }
            }
            catch
            {
                throw;
            }
            return string.Join(",", files);
        }

其中的WithExtensionMultipartFormDataStreamProvider类：

 public class WithExtensionMultipartFormDataStreamProvider : MultipartFormDataStreamProvider
    {
        public string guid { get; set; }

        public WithExtensionMultipartFormDataStreamProvider(string rootPath, string guidStr)
            : base(rootPath)
        {
            guid = guidStr;
        }

        public override string GetLocalFileName(System.Net.Http.Headers.HttpContentHeaders headers)
        {
            string extension = !string.IsNullOrWhiteSpace(headers.ContentDisposition.FileName) ? Path.GetExtension(GetValidFileName(headers.ContentDisposition.FileName)) : "";
            return guid + extension;
        }

        private string GetValidFileName(string filePath)
        {
            char[] invalids = System.IO.Path.GetInvalidFileNameChars();
            return String.Join("_", filePath.Split(invalids, StringSplitOptions.RemoveEmptyEntries)).TrimEnd('.');
        }
    }

效果如下：

图片与文件被成功上传了：

如果后台接口需要设置token，设置Authorization Bearer
通过header设置就行

headers: { 
     "Authorization":"Bearer "+token,
     'Content-Type': 'application/json'  //application/x-www-form-urlencoded  application/json
},

来个例子。
表单

<form id="uploadImgForm" action="http://localhost:8080/apis/oss/api/SmartFiles/UpLoadFormFile" method="post">
    <input type="text" name="bucketName" value="labroom">
    <input type="text" name="filePath" value="labresult">
    <input type="text" name="FileType" value="1">
    <input type="file" name="file">
    <input type="button" value="提交" id="upLoadImgBut">       
</form>

js:

var formData = new FormData($("#uploadImgForm")[0]);
let token = "eyJhbGciOiJSUzI1NiIsImtpZCI6IkU0QUU1RkVFRUQ4ODhFMDAyRjM5ODcwODdGQjZBMDlFQ0UxQ0IzRThSUzI1NiIsInR5cCI6ImF0K2p3dCIsIng1dCI6IjVLNWY3dTJJamdBdk9ZY0lmN2FnbnM0Y3MtZyJ9.eyJuYmYiOjE2NjUyNzg2NTcsImV4cCI6MTY2NTM1MDY1NywiaXNzIjoiaHR0cDovL3RhaS5jcXp1eGlhLmNvbSIsImNsaWVudF9pZCI6IjQzMjE1Y2RmZjJkNTQwN2Y4YWYwNzRkMmQ3ZTU4OWVlIiwic3ViIjoiNTEzOTlmYzljYWZjNDQ5MDkyYTBkMGY5MGU2MDI0YWYiLCJhdXRoX3RpbWUiOjE2NjUyNzg2NTcsImlkcCI6ImxvY2FsIiwidGVuYW50aWQiOiIzMiIsIm5pY2tuYW1lIjoiMzIwMTIzMTk5MDA4MjEwMDAxIiwibmFtZSI6IumfqeWtkOadsCIsInBpY3R1cmUiOiJodHRwczovL3dwaW1nLndhbGxzdGNuLmNvbS9mNzc4NzM4Yy1lNGY4LTQ4NzAtYjYzNC01NjcwM2I0YWNhZmUuZ2lmIiwicm9sZSI6Ilt7XCJJZFwiOlwiYTlhZjMwMzA1MzI4NGI5ODgzYzI3NDM5Y2NiMGQwODRcIixcIlRlbmFudElEXCI6MCxcIlJvbGVOYW1lXCI6XCLlrabnlJ9cIixcIkxldmVsXCI6MCxcIlBhcmVudElkXCI6bnVsbCxcIkRpc2NyZXB0aW9uXCI6bnVsbCxcIkFkZFRpbWVcIjpudWxsLFwiQ3JlYXRlb3JJRFwiOlwiYjBhNmRhYjY5NzUyNDVlM2I4NjZjYmYwZmNhNWQ2OWZcIixcIkNyZWF0ZW9yTmFtZVwiOm51bGwsXCJJc0Rpc2FibGVcIjpmYWxzZSxcIlJlbWFya1wiOm51bGwsXCJMb2dpY0NvZGVcIjpudWxsLFwiV2VpZ2h0XCI6MH1dIiwianRpIjoiRUY2NEU2RDI2Mjc2QTExOEFERTNGQUE4NDk2MTc0QjYiLCJpYXQiOjE2NjUyNzg2NTcsInNjb3BlIjpbImFwaTEiLCJvcGVuaWQiLCJwcm9maWxlIl0sImFtciI6WyJwd2QiXX0.kVKlEsqmp-BBXwFfWTNbKiR-6SgAPWNCoxbZk9ER7J21KxFKLCMNwn3Ta0oExaN0_vNDy_yfSJ36NWUGJLk6_RoOWsJFlaEVSNXhOOleT74DgN0DdZRsUIsp_MuZRt9nN2HOQBanUgAcGFy6h8DwnBIwZDCNh7Kol6uh2vVXKJBtqAVUZLZ7_Bk9bNSXpIJHD4y6dNmRRwanuG602QYJJ_Vj5RzLqXCrPyTwPVJ9pZM6SznLGGgMmBWCT9L3c44ctckEZG00haoJPkaJALYbcW-uevn2DPwCKVLBKvgFxk6cRQkISsq5DoMKts5BKHbWIjHs2MmIDjZuwGEG_5Jshw";
$.ajax({
    url: 'http://localhost:8080/apis/oss/api/SmartFiles/UpLoadFormFile',
    type: 'post',
    data: formData,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    headers: { 
        "Authorization":"Bearer "+token,
        //'Content-Type': 'application/json'  //application/x-www-form-urlencoded  application/json
    },         
    success: function (returndata) {
        console.log(returndata);
    },
    error: function (returndata) {
        alert("报错了");
        console.log(returndata);
    }
});

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

👈c winform listview显示数据

👉excel的一点使用记录

评价

饰心

2019/6/24 14:09:31

刘亦菲 [抱抱]

剑轩:@饰心居然能看出来，厉害哇

2019/6/24 23:14:15 回复

AJAXget时请求异步缓存

ajax中的get为何有时执行，有时不执行?（九十岁老太为何起死回生，数百头母猪为何半夜惨叫；女生宿舍为何频频失窃，超市方...

动态生成表格批量添加再使用AJAX提交后台

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv=&...

jquery验证插件formValidator，AJAX验证手动传值

AJAX验证默认会传递你绑定的id的name值回去，如何你想传递其他值回去的话，直接这样写是不行的应该要这样使用，通过一个方...

AJAXSubmit异步上传图片（嘘，外面都是假的）

引用代码<scriptsrc="/Scripts/jquery.form.js"></script>js就在旁边img链接中，只不过大小为0x0，...

AJAX三级联动

做好二级联动，三级联动几乎完全一样了html:省:<selectid="provice"> </select> 市：<selectid...

ASP.NET MVC Controller接收AJAX post方式发送过来的json对象或数组数据

1、将json数组或者json对象用JSON.stringify()方法序列化成字符串，再将字符串提交到后台。varstuarr=newArray();//创建一...

刷新加载跟AJAX冲突

死循环的问题前台发送了一个Ajax请求但是后台是以刷新加载的方式输出今天老师说了一个打酱油的案例酱油店就相当于后天

AJAX从前台序列化传对象

前台部分//点击确定过后构造一个json对象 varjsonDBJ={}; //对象名字要与后台对象名字对应 jsonDBJ.id="001";...

AJAX从后台序列化传对象

对象部分publicclassProvice { publicstringid{get;set;} publicstringUsername{get;set;} publicstringUsernum{get;se...

关于AJAX页面跳转

AJAX 一般配合一般处理程序使用，但是使用AJAX传的值验证成功过后页面不会跳转，而是直接在本页面中打开目标页面

AJAX 使用基础

前言tnblogajax(异步 javaScript xml）能够刷新网页局部数据而不是刷新网页。所有现代浏览器均支持 XMLHttpRequest 对象（...

jquery AJAX设置authorization: Bearer。AJAX设置Content-Type，设置token。AJAX提交表单上传文件

jquery ajax设置authorization: Bearer 这样就行了 headers: { "Authorization":"Bearer "+t...

AJAX查看请求的接口和请求的参数，爬虫分析AJAX请求需要传递的参数，返回值等

查看ajax请求需要传递的参数，用google调试的就可以查看。 PayLoad可以参看请求携带的参数 headers可以查看请求地址等

vs2017 对 COM 组件的调用返回了错误 HRESULT E_FAIL

vs2017添加引用报错对 COM 组件的调用返回了错误 HRESULT E_FAIL 1.以管理员身份打开vs2017开发人员命令指示符 2...

微信开发三使用反射根据消息类型自动调用不同方法

微信只会向我们一个地方推送消息，如果全部逻辑都写到一起，代码会非常多。所以我们可以考虑通过消息类型，来实现不同的消...