http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

http://www.cnblogs.com/yuanlong1012/p/5127497.html

https://front-js.cc/test/fileupload/

http://www.ruanyifeng.com/blog/2012/08/file_upload.html

1.客户端 upload.cshtml

<!doctype html>

<html>

<head>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <script>

        $(function () {

            $('#btn').on('click', function () {

                var files = $('#file').get(0).files;

                var len = (files.length);

                if (len > 0) {

                    console.log(files[0]);

                    if (window.FormData) {

                        var formData = new FormData();

                        // 建立一个upload表单项，值为上传的文件

                        formData.append('upload', files[0]);

                        var xhr = new XMLHttpRequest();

                        xhr.open('POST', '/Home/UploadFile');

                        // 定义上传完成后的回调函数

                        xhr.onload = function () {

                            if (xhr.status === 200) {

                                console.log('上传成功');

                            } else {

                                console.log('出错了');

                            }

                        };

                        xhr.upload.onprogress = function (event) {

                            if (event.lengthComputable) {

                                var complete = (event.loaded / event.total * 100 | 0);

                                var progress = document.getElementById('uploadprogress');

                                progress.value = progress.innerHTML = complete;

                            }

                        };

                        xhr.send(formData);

                    }

                }

            });

        });

    </script>

</head>

<body>

    <input id='file' type='file' />

    <button id='btn'>clickme</button>

    <progress id="uploadprogress" min="0" max="100" value="0">0</progress>

</body>

</html>

　　2.服务端代码

        /// <summary>

        /// 上传文件

        /// </summary>

        /// <returns></returns>

        public ActionResult UploadFile()

        {

            if (Request.Files.Count > )

            {

                Request.Files[].SaveAs( AppDomain.CurrentDomain.BaseDirectory+"\\upload\\" + Guid.NewGuid().ToString() );

            }

            return View();

        }
        /// <summary>

        /// 上传页面

        /// </summary>

        /// <returns></returns>

        public ActionResult Upload()

        {

            return View("Upload");

        }

Js异步上传加进度条的更多相关文章

  1. js 文件异步上传 显示进度条 显示上传速度 预览文件

    通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...

  2. jquery 实现拖动文件上传加进度条

    通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" &g ...

  3. layui 文件上传加进度条

    1.页面 <div class="layui-row layui-col-space5"> <div class="layui-form-item&qu ...

  4. 纯H5 AJAX文件上传加进度条功能

    上传代码js部分 //包上传 $('.up_apk').change(function () { var obj = $(this); var form_data = new FormData(); ...

  5. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  6. node实现http上传文件进度条 -我们到底能走多远系列（37）

    我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...

  7. Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...

  8. asp.net大文件上传与上传文件进度条问题

    利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...

  9. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...

随机推荐

  1. 集成shareSDK错误总结（新浪微博）

    错误1. . 以上错误是由于没有添加-ObjC的原因,在targets->Build Setting ->Other Linker Flags中添加-ObjC 添加方法如下 错误2 授权回 ...

  2. 手机游戏渠道SDK接入工具项目分享（三）拨开云雾是个坑

    一直在纠结是先写框架设计还是先写掉过的坑,最后本这娱乐大众的态度先写掉过的坑让大家乐呵下. 项目开发过程中遇问题无数,回顾下8个大坑照成了项目一定程度上延期甚至返工. 项目一开始几个人把现有3家主流的 ...

  3. [Modern OpenGL系列（一）]十步搞定OpenGL开发环境

    本文已同步发表在CSDN:http://blog.csdn.net/wenxin2011/article/details/51292143 OpenGL官网:https://www.opengl.or ...

  4. 关于用sql语句实现一串数字位数不足在左侧补0的技巧

    在日常使用sql做查询插入操作时,我们通常会用到用sql查询一串编号,这串编号由数字组成.为了统一美观,我们记录编号时,统一指定位数,不足的位数我们在其左侧补0.如编号66,我们指定位数为5,则保存数 ...

  5. MySQL 一致性读 深入研究

    一致性读,又称为快照读.使用的是MVCC机制读取undo中的已经提交的数据.所以它的读取是非阻塞的. 相关文档:http://dev.mysql.com/doc/refman/5.6/en/innod ...

  6. PHP curl 函数

    转载http://sunking.sinaapp.com/archives/111 最近使用curl的时候,发现了一个比较好用的函数,当然是初级者适用的一个函数,就是curl_getinfo(), 在 ...

  7. Servlet入门笔记

    一.一个简单的Servlet 在servlet 3.0之前,下面是基本步骤: 1.新建一个class名为FirstServlet,让它继承javax.servlet.http.HttpServlet: ...

  8. NGUI裁剪模型和粒子

    效果预览 注:Cube上附着的绿色是我添加的粒子效果. 软件环境 NGUI 3.9.x Unity 5.1 x64 相关知识 RenderTexture RenderTexture是一种特殊的纹理,它 ...

  9. Java监听器

    监听器 1.概念 监听器:主要是用来监听特定对象的创建,属性的变化的!,本质上却是一个实现特定接口的普通java类! 对象分为自己创建自己使用的,和别人创建自己用的,自己创建的不需要监听,值需要取监听 ...

  10. JBPM工作流

    一．开发环境的搭建 1.下载Jbpm4.4 1.1下载地址: https://sourceforge.net/projects/jbpm/files/jBPM%204/jbpm-4.4/ 1.2解压后 ...