记得引入jquery

//上传进度回调函数:  
        function progressHandlingFunction(e) {
            if (e.lengthComputable) {
                $('progress').attr({ value: e.loaded, max: e.total }); //更新数据到进度条  
                var percent = e.loaded / e.total * 100;
                $('#progress').html(e.loaded + "/" + e.total + " bytes. " + percent.toFixed(2) + "%");
            }
        }

$("#upFilebtn").click(function () {
                //判断文件类型
                var file = $("#AjaxFileData")[0].files[0];
                var imgType = (file.name.substr(file.name.lastIndexOf("."))).toLowerCase();
                if (imgType != ".jpg" && imgType != ".gif" && imgType != ".jpeg" && imgType != ".png") {
                    alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)!");
                    return false;
                }
                if (($("#AjaxFileData")[0].files[0].size / 1024) > (5 * 1024)) {
                    alert("上传图片不得大于 5M");
                    return;
                }
                var formData = new FormData();
                formData.append("username", "formName");
                formData.append("file", file);
                $.ajax({
                    url: '喂喂改一下',
                    type: 'post',
                    data: formData,
                    xhr: function () { //获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数  
                        myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) { //检查upload属性是否存在  
                            //绑定progress事件的回调函数  
                            myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                        }
                        return myXhr; //xhr对象返回给jQuery使用  
                    },
                    processData: false,
                    contentType: false,
                    success: function (msg) {
                   
                    alert('不谈了');
                    }
                });
            });

html:

<input id="AjaxFileData" type="file" >

<input  type="button" id="upFilebtn" >

上传进度:<progress></progress><br/>  
    <p id="progress">0 bytes</p>  
    <p id="info"></p>

server:

string fileDir = HttpContext.Current.Server.MapPath("~/uploadfile/Do");

HttpPostedFile file = context.Request.Files["file"];

file.SaveAs(Path.Combine(fileDir, fileName));

好人甲 : https://www.cnblogs.com/tyqing/p/5995538.html

formdata 上传图片+进度条的更多相关文章

  1. 使用axios实现上传图片进度条

    在最近做的项目中,一个手机页面最多要上传几十张图片,虽然对照片做了压缩处理,不过最后还是很大,如果网卡的话,上传的时间很差,如果一直在loading的话,用户都不知道什自己上传了多少,为了更直观的展现 ...

  2. 采用formdata做跨域的、无刷新、带进度条的文件上传

    以前做无刷新上传,都要用iframe,如果想有进度条,就千难万难,不得不用flash等插件来实现. 现在HTML5终于普及了,筒子们不用再那么痛苦了. 所有这一切都变得异常简单!! 不信?且看如下代码 ...

  3. HTML5 jQuery+FormData 异步上传文件,带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

  4. 基于Jquery插件Uploadify实现实时显示进度条上传图片

    网址:http://www.jb51.net/article/83811.htm     这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...

  5. 上传图片 展示进度条 bootstrap

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bo ...

  6. 使用Uploadify实现上传图片生成缩略图例子,实时显示进度条

    不了解Uploadify的,先看看前一篇详细说明 http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html Uploadify ...

  7. android一个上传图片的样例,包含怎样终止上传过程,假设在上传的时候更新进度条(一)

    先上效果图: Layout为: <? xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  8. H5上传图片,并且显示进度条

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. html上传图片(进度条变化)、音乐

    <html> <head> <title>$Title$</title> </head> <link href="css/b ...

随机推荐

  1. DHCP服务器 出现的故障

    系统版本:Windows Server 2008 R2 Standard 故障现象:近段时间,我们核心网络DHCP服务器,总是发现有掉线重起现象,大约每10分钟至30分钟不定时会重起. 故障代码:关键 ...

  2. centos7 vmd-1.9.3安装

    1. 下载安装包 安装包下载地址是http://www.ks.uiuc.edu/Research/vmd/,选择自己合适的版本,我下载1.9.3版本 2. 安装必要库 yum install free ...

  3. Pocket Gems面经prepare: Diamond and Ruby

    说我有一个背包,有n个格子,一个格子可以放5个钻石,一个钻石10块钱,一个格子可以放5个ruby,一个ruby 5块钱, 一个格子可以放一个装备,一个装备25块钱. 然后给你n个钻石n个ruby n个 ...

  4. redis----------linux和mac如何安装redis和启动,关闭

    1.打开官网https://redis.io/download.官网有安装命令 2.以下是我的执行过程截图 执行完官网给的命令以后,再执行  make PREFIX=/usr/local/redis ...

  5. 自动化运维工具——ansile详解

    自动化运维工具——ansible详解(一) 目录 ansible 简介 ansible 是什么? ansible 特点 ansible 架构图 ansible 任务执行 ansible 任务执行模式 ...

  6. MySQL根据出生日期计算年龄

    以前使用mysql不是很多,对mysql的函数也不是很熟悉,遇到这个问题第一时间百度搜索,搜索到这两种方法,这两种方法是排在百度第一条的博客. 方法一 SELECT DATE_FORMAT(FROM_ ...

  7. Linux 命令整理-ps

    ps 命令 ps -ef | grep tomcat ps -ef :以长格式(全格式)显示所有进程:“|” :是管道grep :检索tomcat :与字符tomcat有关的进程 ps[选项]-e:显 ...

  8. Linux交换Esc和Caps

    使用过 .xmodmap,重启后就失效,添加到rc.local也不管用,后来通过在xorg里配置成功. 更改xorg里的键盘配置,增加Option "XkbOptions" &qu ...

  9. Linux格式化、挂载及卸载数据盘

    注意: 磁盘分区和格式化是高风险行为,请慎重操作.本文档描述如何处理一个新买的数据盘,如果您的数据盘上有数据,请务必对数据进行备份以避免可能的数据丢失. 服务器仅支持对 数据盘 进行分区,而不支持对  ...

  10. python 文件重命名

    将文件夹中的.jsp重命名为.html import os def rename(path): files = os.listdir(path) for file in files: dir = os ...