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. linux中redis的php扩展安装

    PHP中的扩展一般都是在安装环境的时候就已经装好了的.但是有的一些扩展在后期想要加上去的话也是可以的.php支持后期安装扩展. 想要安装扩展就需要先去下载安装扩展所需要的扩展源码包.autoconf. ...

  2. P87LPC760/61/62/64/67/68/69/78/79芯片解密单片机破解价格

    NXP恩智浦P87LPC760/61/62/64/67/68/69/78/79芯片解密单片机破解 NXP LPC700系列单片机解密型号: P87LPC759.P87LPC760.P87LPC761. ...

  3. 【CentOS】Linux日常管理

    /////////////////////////目录///////////////////////////////////////// 一.日常监控指标相关 1.监控系统状态命令 2.查看系统进程 ...

  4. OSG消息机制之事件处理概述

    OSG的消息机制包括好多个头文件预定义及多个类. 首先,消息接收相关的类当属osgGA::GUIEventHandler和osgGA::GUIEventAdapter这两个类了.前者处理OSG程序与用 ...

  5. linux I/O stack cache 强制刷新

    linux 存储子系统作为最为复杂的子系统之一,拥有很深的模块栈(如图),其中很多模块又有自己的缓存功能(如下图).实际应用中,用户下发的数据停留在哪个缓存中,是否已经写入磁盘,这些操作对用户来说是个 ...

  6. 如何让{dede:channel}有子栏目显示子栏目，无子栏目不显示同级栏目

    我们在使用织梦系统制作网站时经常会遇到网站栏目较多,显示当前栏目下的二级与三级栏目时,使用栏目嵌套标签,但是当三级栏目为空时,会显示同级栏目.从用户体验角度出发,常理情况下也是需要空白的,即二级栏目下 ...

  7. Flume_常见的几个问题

    在HDFS的文件默认生成文件大小1K,如何设置文件大小和数量 拷贝一份flume-conf.properties.template改名为hive-mem-size.properties hive-me ...

  8. Smart3D系列教程6之 《案例实战演练3——倾斜数据正射影像及DSM的生产》

    一.前言 Wish3D出品的系列教程中,前面两讲分别讲述说明了小物件的照片三维重建.大区域地形的三维重建,从照片的直接导入至软件到通过Excel表格将区块导入处理,从不同的模型类别.不同的导入方式演示 ...

  9. MAC下使用Charles抓取安卓模拟器数据

    一.安装Charles,这个不多记录 二.Charles数据乱码问题(参照这篇文章 http://blog.csdn.net/huanghanqian/article/details/52973651 ...

  10. centos下为大硬盘分区(大于2T)

    问题:centos/redhat下使用分区工具fdisk创建大于2TB的分区,无法创建 关键字:MBR.GPT.CHS.LBA MBR:主引导记录 GPT:GUID 分区表 CHS:磁柱 磁头 扇区 ...