C# 用原生JS进行文件的上传

Posted 2020-08-07 alun-chen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了C# 用原生JS进行文件的上传相关的知识，希望对你有一定的参考价值。

1.此文章是用原生JS来进行文件的上传，有两个版本，一个不用ajax，一个用ajax。

1）非AJAX

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>

<form id="upload-form" action="Template/UploadBusinessImage" method="post" enctype="multipart/form-data">
    <input type="file" id="upload" name="ProductImage"/> <br/>
    <input type="submit" value="上传"/>
</form>

</body>
</html>

2）AJAX

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8"/>
    <script>
        /*原生JS版*/
        function updateFile() {
             /* FormData 是表单数据类 */
             var fd = new FormData();
             var ajax = new XMLHttpRequest();
             fd.append("upload", 1);
             /* 把文件添加到表单里 */
             fd.append("ProductImage", document.getElementById("upfile").files[0]);
             ajax.open("post", "Template/UploadBusinessImage", true);

             ajax.onload = function () {
             console.log(ajax.responseText);
            };
         ajax.send(fd);
        }

    </script>
</head>
<body>
    <p><input type="file" id="upfile"></p>
    <p><input type="button" id="upJS" value="用原生JS上传" onclick="updateFile()"></p>
</body>
</html>

2. 后台

        public ActionResult UploadBusinessImage(HttpPostedFileBase ProductImage)
        {

            string error = "";
            try
            {
                //文件上传
                HttpPostedFileBase postFileBase = ProductImage;

                //文件后缀
                string extension = Path.GetExtension(postFileBase.FileName);

                //文件流
                Stream uploadStream = postFileBase.InputStream;

                //把文件写入到本地E盘
                using (var fileStream = System.IO.File.Create("E:\\" + postFileBase.FileName))
                {
                    uploadStream.Seek(0, SeekOrigin.Begin);
                    uploadStream.CopyTo(fileStream);
                }

                return this.Json(error, JsonRequestBehavior.AllowGet);

            }
            catch (Exception e)
            {
                return this.Json(e.Message, JsonRequestBehavior.AllowGet);
            }
        }

以上是关于C# 用原生JS进行文件的上传的主要内容，如果未能解决你的问题，请参考以下文章

原生js使用input实现文件上传

JS创建文件并上传服务器

ajaxFileUpload上传带参数文件及JS验证文件大小

原生js 文件上传下载封装

C# winform如何实现批量上传文件到远程服务器？

C#使用HTML文件中的file文件上传，用C#代码接收上传文件