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进行文件的上传的更多相关文章

  1. ajax和原生ajax、文件的上传

    ajax理解: ajax发送的请求是异步处理的.也就是说如下形式: function f1(){ $.ajax( { ....... success:function(){ a= return a } ...

  2. js分割文件快速上传

    <?php header('Content-type:text/html;charset=UTF-8'); ?> <?php if ($_FILES) { if(!file_exis ...

  3. js实现文件的上传和输出,拖拽上传图片

    js文件上传 文件下载 以前的文件的下载都是在服务器,现在也是放在服务器比较好,有时候为了一些开发的方便,我们临时把处理的数据就放在了本地,然后自己访问.这个也是可以的. 1.利用html5的 Fil ...

  4. Ext.js多文件选择上传,

    工作了之后来到了一家用Ext.js的公司, 一开始的时候做项目, 我被分给一个做一个单表的增删改查, 再加上文件上传功能, 带我的老师让我自己研究一下Ext.js怎么多文件选择上传, 并且能获取到上传 ...

  5. js大文件分块上传断点续传demo

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  6. nodeJs + js 大文件分片上传

    简单的文件上传 一.准备文件上传的条件: 1.安装nodejs环境 2.安装vue环境 3.验证环境是否安装成功 二.实现上传步骤 1.前端部分使用 vue-cli 脚手架,搭建一个 demo 版本, ...

  7. 用原生JS实现多张图片上传及预览功能（兼容IE8）

    最近需要做一个图片上传预览的功能(兼容IE8-11.chrome.firefox等浏览器),网上现有的文件上传组件(如webuploader)总是会遇到一些兼容性问题.于是我参考了一些博文(链接找不到 ...

  8. 原生JS实现异步图片上传（预览）

    效果 实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...

  9. js大文件分割上传

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

随机推荐

  1. 老生长谈的$.extend()方法

    jq的extend()是jq插件扩展很重要的部分,到这里证明是可以自己在jq的基础上,分为两种方法去扩展或开发,为jq本身添加一个方法,可以理解成扩展静态方法和自定义方法. 今天有看到一篇帖子,对这部 ...

  2. Java EE之数据库连接与插入

    在这之前应该先: **保证项目中导入了mysql-connector-java-5.1.23-bin.jar **服务器上的数据库24小时连接成功: 1.在源包下新建一个普通的Java文件,取名为My ...

  3. VS 编辑器扩展辅助工具

    [工具]——[扩展和更新]——[联机]输入 C# outline 2015

  4. 微服务中的netty

    一般使用netty主要是整个netty流程的理解,实际开发中服务端.客户端参数的配置,以及连接 handle的管理是关键,再有就是encode和decode编码.解码. 服务端流程图 客户端流程图包含 ...

  5. docker学习之二镜像创建

    继上一篇docker入门之后写一点使用的经验. 通过命令:docker run -it REPOSITORY或IMAGE ID   注:-it后面跟的字段可以通过下面指令获得 创建运行的容器,会进入一 ...

  6. 1.2 控制器 view 的创建和加载

    本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末 如果觉得本文内容过长,请前往本人 “简书”       加载优先顺序: 1.用系统的loadView方法创建控制器的视图 2.如果指定 ...

  7. 背压(Backpressure)机制

    作者:张铁蕾链接:https://www.zhihu.com/question/49618581/answer/117107570来源:知乎著作权归作者所有,转载请联系作者获得授权. 首先,从大的方面 ...

  8. [机器学习] 深度学习之caffe1——软件配置与测试

    caffe的编译配置真的是很让人头疼啊,不知道试过多少次了~~~ 重装系统了七八次,搞得linux的一些常用命令倒是很熟悉了~~~ 我有洁癖~~~某一个点上出了错,我一定要把它搞好了,再重新来一次,我 ...

  9. [BZOJ3751][NOIP2014] 解方程

    Description 已知多项式方程:a0+a1*x+a2*x^2+...+an*x^n=0 求这个方程在[1,m]内的整数解(n和m均为正整数).   Input 第一行包含2个整数n.m,每两个 ...

  10. clang: error: linker command failed with exit code 1 (use -v to see invocati

    安装了 pod 的项目,如果仍旧打开 xcodeproject 文件, 运行时会弹出此 bug