WebApi实现Ajax模拟Multipart/form-data方式多文件上传

前端页面代码:

<input type="file" class="file_control" /><br />
<input type="file" class="file_control" /><br />
<input type="file" class="file_control" />
<button id="btnUpload" type="button">上传</button>

<script type="text/javascript">

    $(document).ready(function () {
        $("#btnUpload").click(function () {
            var formdata = new FormData();
            var files = $(".file_control");
            $.each(files, function (index, domEle) {
                formdata.append("file" + index, domEle.files[0]);
            });

            $.ajax({
                url: ‘/api/Service/UpLoad‘,
                type: ‘POST‘,
                cache: false,
                data: formdata,
                processData: false,
                contentType: false,
                success: function (data) {
                    alert(data.success);
                },
                error: function () {
                    alert("error");
                }
            }).done(function (res) {

            }).fail(function (res) {

            });
        });
</script>

后端代码:

        /// <summary>
        /// 文件上传
        /// </summary>
        /// <param name="request"></param>
        /// <returns></returns>
        [HttpPost]
        [Route("api/Service/UpLoad")]
        public Task<HttpResponseMessage> UpLoad(HttpRequestMessage request)
        {
            if (!request.Content.IsMimeMultipartContent())
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            if (!ModelState.IsValid)
                throw new HttpResponseException(HttpStatusCode.BadRequest);

            string root = AppDomain.CurrentDomain.BaseDirectory + @"UploadFiles";
            if (!Directory.Exists(root))
                Directory.CreateDirectory(root);

            MultipartFormDataStreamProvider provider = new MultipartFormDataStreamProvider(root);

            var task = request.Content.ReadAsMultipartAsync(provider).ContinueWith<HttpResponseMessage>(t =>
            {
                if (t.IsFaulted || t.IsCanceled)
                    return request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception);

                HttpResponseMessage response = null;

                string filePath = root + @"\" + DateTime.Now.ToString("yyyyMMdd");
                if (!Directory.Exists(filePath))
                    Directory.CreateDirectory(filePath);

                foreach (var file in provider.FileData)
                {
                    string fileName = file.Headers.ContentDisposition.FileName;

                    if (Regex.IsMatch(fileName, @"^"".*""$"))
                        fileName = fileName.Trim(‘"‘);

                    if (Regex.IsMatch(fileName, @"[\\/]+"))
                        fileName = Path.GetFileName(fileName);

                    string extName = Path.GetExtension(fileName);
                    string tempName = DateTime.Now.Ticks.ToString() + extName;
                    File.Copy(file.LocalFileName, Path.Combine(filePath, tempName));

                    if (File.Exists(file.LocalFileName))
                        File.Delete(file.LocalFileName);

                    // 转存阿里OSS、七牛云、腾讯云COS

                    response = request.CreateResponse(HttpStatusCode.OK, new { success = true });
                }

                return response;
            });

            return task;
        }

*注:如果报IsFaulted=true的错误,基本上是因为你没给input起name造成的。

时间: 2024-10-12 08:32:44

WebApi实现Ajax模拟Multipart/form-data方式多文件上传的相关文章

el-upload用form的方式多文件上传的方法

使用el-upload组件遇到的坑. 1.第一种感觉最好,首先多个文件是一个http请求,另外还可以传除文件外其他的参数,但是没有进度条了. 发送请求的部分没有注释的部分是我分装了调后台的api,注释的部分是直接调. 注意如果使用自定义提交http-request,则on-success和on-error这两个钩子函数会不起作用,另外点击事件submitUpload中的this.$refs.uploadFiles.submit();是必须的,个人感觉是先将所有的文件给el-form处理, 我发先

我爱Java系列---【SpringMVC传统方式的文件上传和前端获取数据库图片在页面显示】

一.文件上传 说明:传统方式的文件上传,指的是我们上传的文件和访问的应用存在于同一台服务器上.并且上传完成之后,浏览器可能跳转. 1. 第一步:创建 maven 工程并导入 commons-fileupload 坐标 1 <dependency> 2 <groupId>commons-fileupload</groupId> 3 <artifactId>commons-fileupload</artifactId> 4 <version&g

以调用接口的方式将文件上传至Web服务器

前台代码: <form id="form1" action="http://www.abc.com/data/UploadFile.aspx" method="post" enctype="multipart/form-data" > <input type="file" name="F" style="width:160px;" /> <

AJAX提交form表单带文件上传

过了三天才想要写博客,这样不好,要改正 在做毕设的时候,用户发帖涉及到了文件上传的问题,在这里记录一下 背景: 在用户发帖的时候,用户只想发表文字postText,还有些用户想在发表postText的同时还发表一些图片,如何做? 上代码 不写的太细了,和流水账似的,挑重点记录一下. 1.前台的文件上传 本来想用form表单直接上传了,但是form提交时会刷新整个页面,但这不是我想要的,所以使用了ajax提交form表单. 利用ajax提交表单需要用到jquery.form.js这个包,网上有很多

使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传

Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可以在此下载:http://sourceforge.net/project/showfiles.php?group_id=151897&package_id=168043&release_id=493609 下载之后解压缩至硬盘中的某一目录中,编译项目得到Anthem.dll.然后将其拷贝到We

ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传

最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使用了某大神写的 MultipartEntity.java 生成 form 表单内容,然而生成的内容格式不够标准,而且还存在诸多问题,如:首先将所有文件读入到内存,再生成字节流写入到 socket.那么问题来了:如果是几百MB的文件怎么办? 几番搜索,受到 这篇文章(已被我转载,但是示例代码已过期)的

ajax提交表单,并且可以支持文件上传

当我们提交表单但是又不想要刷新页面的时候就可以考虑使用ajax来实现提交功能,但是这有个局限就是当有文件上传的时候是行不通的,下面借助于jquery.form可以很方便满足我们的需求. 1.表单写法: <form class="ui form error-page" id="error_page" method="post" action="{{ url('web/save/error-page') }}" enctyp

C#模拟请求,模拟登录,Cookie设置、文件上传等问题汇总

由于业务需求,最近需要模拟完成登陆某个网站,并上传所需要的文件.在开发途中,遇到了很多问题,现在,就我遇到的一些问题及解决办法说明如下,希望对遇到同样问题的人有所帮助.因为技术有限,可能有些内容并不完全正确或者理解有偏差,希望大家不要见怪,有不同的想法可以留言,我们共同学习,这也是我开始写博客的初衷之一. 模拟请求,首先我觉得我们需要明确的是,模拟那些请求,我们模拟请求要完成那些操作,就拿我上面的功能来说,我需要模拟登录某个网站,然后打开固定的页面,输入关键字,查找相关信息,然后上传所需要的文件

SpringMVC注解方式与文件上传

目录: springmvc的注解方式 文件上传(上传图片,并显示) 一.注解 在类前面加上@Controller 表示该类是一个控制器在方法handleRequest 前面加上 @RequestMapping("/index") 表示路径/index会映射到该方法上 将上一篇的博客改为注解方式: SpringMVC的基础配置及视图定位 1.修改springmvc-servlet.xml 去掉映射相关的配置,因为已经使用注解方式了增加 <context:component-scan