Ajax上传文件至MVC的controller

最新推荐文章于 2024-01-29 22:02:54 发布

VIP文章 _学而时习之_

最新推荐文章于 2024-01-29 22:02:54 发布

阅读量6.1k

点赞数

分类专栏： ASP.NET C# Javascript 文章标签：上传文件 controller

本文链接：https://blog.csdn.net/xxdddail/article/details/59022585

版权

在前端与后端交互，ajax是最常用的方式，而后台的响应也有很多方式，在asp.net中有一般处理程序和MVC的Controller响应的方式。在使用controller来响应请求时，可以通过路由配置来定位到具体的方法，这样代码清晰，逻辑分明，但前端传到后端的参数一般是通过函数的参数来接收的，而对于文件这样较大的数据，不太方便接收，虽然有类似HttpPostedFileBase的类作为参数，但使用ajax来与其交互时变的不易处理，那有什么其他的方法呢？

有的！

上传文件由于是数据量比较大的传输，所以使用ajax的post方法，在post的时候将数据放到FormData中，如果还有其他的参数要传输，为了便于后端的接收，我们可以将其放到URL的问号后面，而后端使用函数的参数来接收，只要标识为FromUri就可以了。文件数据传输时必然是要用multipart的方式来传的，后端也自然的要以这种方式来接收。由于Post文件数据是分断的，为了保证接收，我们后端使用Task来接收。我们来看具体的代码。

前端代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>上传</title>
    <meta charset="utf-8" />
    <link href="stylesheets/css.css" rel="stylesheet" />
    <script src="scripts/zepto.min.js"></script>
</head>
<body>
    <div class="all">
        <div id="ajaxWait" class="mask">
            <img src="images/loading.gif" />
        </div>
        <div class="head">
        </div>
        <div class="body">
            <div class="body_style">
                <div class="upload-container">
                    <div style="height:43px;">
                        <div class="upload-wrap">
                            <input type="file" id="file1" class="upload-pic" >
                            <span class="upload-text">
                                选择图片1
                            </span>
                        </div>
                    </div>
                    <div class="upload-preview-wrap">
                        <img id="fileStylePreview" class="upload-preview-img" />
                    </div>
                </div>
                <div class="upload-container">
                    <div style="height:43px;">
                        <div class="upload-wrap">
                            <input type="file" id="file2" class="upload-pic" >
                            <span class="upload-text">

最低0.47元/天解锁文章

_学而时习之_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax上传文件至MVC的controller

在前端与后端交互，ajax是最常用的方式，而后台的响应也有很多方式，在asp.net中有一般处理程序和MVC的Controller响应的方式。在使用controller来响应请求时，可以通过路由配置来定位到具体的方法，这样代码清晰，逻辑分明，但前端传到后端的参数一般是通过函数的参数来接收的，而对于文件这样较大的数据，不太方便接收，虽然有类似HttpPostedFileBase的类作为参数，但使用a
复制链接

扫一扫