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. [leetcode]题型整理之用bit统计个数

    137. Single Number II Given an array of integers, every element appears three times except for one. ...

  2. Web Mercator 公开的小秘密

    网上已经有好多作者都不吝笔墨,写了好多有关 Web Mercator这个坐标系的前世今生.多搜罗多摄入,我们会得到很多有用的信息.今天讨论到 3758,3857,102100,900913-- 这些I ...

  3. 用SqlBulkCopy批量安插数据时提示来自数据源的 String 类型的给定值不能转换为指定目标列的类型 int

    dr["description"] = ds.Tables[0].Rows[i]["组织描述"].ToString();                dr[& ...

  4. URAL 2089 Experienced coach Twosat

    Description Misha trains several ACM teams at the university. He is an experienced coach, and he doe ...

  5. CompiledEffect Direct3D9 Sample fxc.exe

  6. QuartZ Cron表达式

     Cron Expressions cron的表达式是字符串,实际上是由七子表达式,描述个别细节的时间表.        Seconds        Minutes        Hours     ...

  7. volatile不能保证原子性

    1.看图自己体会 2.体会不了就给你个小程序 package cs.util; public class VolatileDemo { private volatile int count =0; p ...

  8. Access restriction: The type 'FileURLConnection' is not API

    遇到这种报错,解决方案如下: 报错原因是访问限制报错 工具栏中Project>preferences>java-Compiler>Errors/Warnings>把右侧的[De ...

  9. CI框架代码运行最详细的流程

    最近在学习CI(3.1.0-dev)框架源码,一边看源码,一边在github上面写中文注释,https://github.com/pandancode/CI-note,有兴趣的同学可以看看. inde ...

  10. java cookie 工具类

    package com.xxx.xxx.xxx.xxx; import java.net.URLDecoder; import java.net.URLEncoder; import javax.se ...