Js异步上传加进度条
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异步上传加进度条的更多相关文章
- js 文件异步上传 显示进度条 显示上传速度 预览文件
通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...
- jquery 实现拖动文件上传加进度条
通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" &g ...
- layui 文件上传加进度条
1.页面 <div class="layui-row layui-col-space5"> <div class="layui-form-item&qu ...
- 纯H5 AJAX文件上传加进度条功能
上传代码js部分 //包上传 $('.up_apk').change(function () { var obj = $(this); var form_data = new FormData(); ...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- node实现http上传文件进度条 -我们到底能走多远系列（37）
我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...
- Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...
- asp.net大文件上传与上传文件进度条问题
利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...
- 利用ajaxfileupload.js异步上传文件
1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...
随机推荐
- 一个高级的J2E工程师需要面对MySQL要有那些基本功夫呢<上>
1. MySQL的架构介绍1.1 MySQL简介: MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不 ...
- SE Springer小组之《Spring音乐播放器》可行性研究报告三、四
3 对现有系统的分析 由于本次可行性分析主要是建立在团队自行实现一个音乐软件的目标上,并不是在一个现有系统的基础上开发改进的新系统.因此这里将分析一款市面上已经存在的音乐软件(以下称为W音乐),并为之 ...
- css之定位
定位有三种,分别是相对定位 position:relative; .绝对定位 position:absolute; .固定定位 position:fixed; 相对定位 相对定位,就是微调元素位置的, ...
- MTU(Maximum transmission unit) 最大传输单元
最大传输单元(Maximum transmission unit),以太网MTU为1500. 不同网络MTU如下: 如果最大报文数据大小(MSS)超过MTU,则会引起分片操作. 路径MTU: 网路 ...
- 数据库实战案例—————记一次TempDB暴增的问题排查
前言 很多时候数据库的TempDB.日志等文件的暴增可能导致磁盘空间被占满,如果日常配置不到位,往往会导致数据库故障,业务被迫中断. 这种文件暴增很难排查,经验不足的一些运维人员可能更是无法排查具体原 ...
- getopt,getoptlong学习
getopt和getoptlong被用来解析命令行参数. 一.getopt #include <unistd.h> extern char *optarg; extern i ...
- java正则表达式
java正则表达式 1.Java正则表达式的语法与示例: http://baike.xsoftlab.net/view/207.html 2.Java 正则表达式: http://www.runo ...
- apache 开机自启动脚本设置
默认我们源码编译安装apache,是不能使用service这个命令来启动的,通常我们启动的命令是: [root@localhost httpd-2.2.16]# /usr/local/apache2/ ...
- linux命令-文件命令
1.解压.tar文件 tar -vxf *.tar 2.把一个文件夹下的内容复制到另一个文件夹 将aaa内所有内容复制到bbb cp -a aaa/* /bbb/ * 3.复制文件时不改变文件的时间 ...
- python编码最佳实践之总结
相信用python的同学不少,本人也一直对python情有独钟,毫无疑问python作为一门解释性动态语言没有那些编译型语言高效,但是python简洁.易读以及可扩展性等特性使得它大受青睐. 工作中很 ...