1、

 <input type="file" id="file"  />
<progress id="pro" value=""></progress>
<span id="output" style="font-size: 15px">等待</span><br>
<button type="button" id="upload" class="btn btn-primary">上传资源</button><br />
<input type="hidden" id="path" />
//记录文件上传状态,如果文件上传完成则为false  否则为true
var upType = false; var page = {
init: function () {
$("#upload").click($.proxy(this.upload, this));
}, upload: function () {
var file = $("#file")[0].files[0], //文件对象
name = file.name, //文件名
size = file.size, //总大小 succeed = 0;
//重新定义文件的名字,放置重复
var path = $("#path").val();
$("#path").val(path + "." + name.replace(/.+\./, ""));
name = $("#path").val();
alert(name);
var shardSize = 2 * 1024 * 1024, //以2MB为一个分片
shardCount = Math.ceil(size / shardSize); //总片数 for (var i = 0; i < shardCount; ++i) {
//计算每一片的起始与结束位置
var start = i * shardSize,
end = Math.min(size, start + shardSize); //构造一个表单,FormData是HTML5新增的
var form = new FormData();
form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分
form.append("name", name);//文件名称
form.append("total", shardCount); //总片数
form.append("index", i + 1); //当前是第几片
var pro = document.getElementById("pro");
pro.max = shardCount; //Ajax提交
$.ajax({
url: "/Product/UpfileProductResources/" + $("#hidProductId").val(),
type: "POST",
data: form,
async: true, //异步
processData: false, //很重要,告诉jquery不要对form进行处理
contentType: false, //很重要,指定为false才能形成正确的Content-Type
success: function () {
++succeed;
pro.value = succeed;
var num = (succeed / shardCount) * 100;
//展示上传的百分比
$("#output").text(num.toFixed(2) + "%");
if (succeed == shardCount) {
upType = true;
} }
});
}
}
};
$(function () {
page.init();
});

  

2、

/// <summary>
/// 上传产品资源
/// </summary>
/// <param name="id">产品Id</param>
/// <returns></returns>
[HttpPost]
public ActionResult UpfileProductResources(string id)
{
//从Request中取参数,注意上传的文件在Requst.Files中
string name = Request["name"];
int total = Convert.ToInt32(Request["total"]);
int index = Convert.ToInt32(Request["index"]);
var data = Request.Files["data"]; string path = ConfigurationManager.AppSettings["UpPath"].ToString();
//产品资源
string serviceLocation = "/Upload/UploadFiles/Product/Resource/";
//保存一个分片到磁盘上
string dir = PublicLibrary.Public.Files.CreatePath(path + serviceLocation); //保存一个分片到磁盘上
// string dir = Server.MapPath("~/Upload");
string file = Path.Combine(dir, name + "_" + index);
data.SaveAs(file); //如果已经是最后一个分片,组合
//当然你也可以用其它方法比如接收每个分片时直接写到最终文件的相应位置上,但要控制好并发防止文件锁冲突
if (index == total)
{
file = Path.Combine(dir, name);
var fs = new FileStream(file, FileMode.Create);
for (int i = 1; i <= total; ++i)
{
string part = Path.Combine(dir, name + "_" + i);
var bytes = System.IO.File.ReadAllBytes(part);
fs.Write(bytes, 0, bytes.Length);
bytes = null;
System.IO.File.Delete(part);
} fs.Close();
} //返回是否成功,此处做了简化处理
return Json(new { Error = 0 }); // return json;
}

  

Html上传大文件的更多相关文章

  1. [Asp.net]Uploadify上传大文件,Http error 404 解决方案

    引言 之前使用Uploadify做了一个上传图片并预览的功能,今天在项目中,要使用该插件上传大文件.之前弄过上传图片的demo,就使用该demo进行测试.可以查看我的这篇文章:[Asp.net]Upl ...

  2. php 上传大文件配置upload_max_filesize和post_max_size选项

    php 上传大文件配置upload_max_filesize和post_max_size选项 (2014-04-29 14:42:11) 转载▼ 标签: php.ini upload _files[f ...

  3. PHP上传大文件 分割文件上传

    最近遇到这么个情况,需要将一些大的文件上传到服务器,我现在拥有的权限是只能在一个网页版的文件管理系统来进行操作,可以解压,可以压缩,当然也可以用它来在线编辑.php文件. 文件有40M左右,但是服务器 ...

  4. ASP.NET上传大文件的问题

    原文:http://www.cnblogs.com/wolf-sun/p/3657241.html?utm_source=tuicool&utm_medium=referral 引言 之前使用 ...

  5. php 上传大文件主要涉及配置upload_max_filesize和post_max_size两个选项

    php 上传大文件主要涉及配置 upload_max_filesize 和post_max_size两个选项   今天在做上传的时候出现一个非常怪的问题,有时候表单提交可以获取到值,有时候就获取不到了 ...

  6. SWFUpload上传大文件(暂时用用,真正用的时候还是要改的)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. PHP上传大文件和处理大数据

    1. 上传大文件 /* 以1.5M/秒的速度写入文件,防止一次过写入文件过大导致服务器出错(chy/20150327) */ $is_large_file = false; if( strlen($x ...

  8. QQ上传大文件为什么这么快

    今天和同事在群里讨论“QQ上传大文件/QQ群发送大文件时,可以在极短的时间内完成”是如何做到的. 有时候我们通过QQ上传一个几百M的文件,竟然只用了几秒钟,从带宽上限制可以得出,实际上传文件是不可能的 ...

  9. IIS7下swfupload上传大文件出现404错误

    要求上传附件大小限制在2G,原本以为可以轻松搞定.在编译模式下可以上传大文件,可是在IIS7下(自己架的服务器),一上传大的文件就会出现 Http 404错误,偶尔有的文件还有IO. error错误. ...

  10. php无法上传大文件完美解决方案

    php.ini无法上传大文件完美解决办法 1.打开php.ini(打开方式就不用说了,百度一大堆) 2.查找post_max_size 表单提交最大数值,此项不是限制上传单个文件的大小,而是针对整个表 ...

随机推荐

  1. 楊輝三角C#版

    class Program { static void Main(string[] args) { Console.WriteLine("please input a number:&quo ...

  2. Django Manage File

    default_storage >>> from django.core.files.base import ContentFile >>> from django ...

  3. 二十一、Node.js-EJS 模块引擎

    初识 EJS 模块引擎 我们学的 EJS 是后台模板,可以把我们数据库和文件读取的数据显示到 Html 页面上面.它是一个第三方模块,需要通过 npm 安装https://www.npmjs.com/ ...

  4. OCP最新题库收集,新版052考题及答案整理-19

    19.Which is true about invalid PL/SQL objects? A) They are automatically recompiled against the new ...

  5. “全栈2019”Java第十一章:标识符

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. redis 3.0 集群__配置文件详解(常用配置)

    参考文档 http://www.cnblogs.com/huangjacky/p/3700473.html http://www.cnblogs.com/cxd4321/archive/2012/12 ...

  7. Badboy安装和介绍

    Badboy安装和介绍 [前言] 欢迎来到我的博客 Badboy是用C++开发的动态应用测试工具,拥有强大的屏幕录制和回放功能,可提供图形结果分析功能,同时Badboy提供了将Web测试脚本直接导出生 ...

  8. iOS 逆向工程

    HOOK(钩子函数)在OCD动态化语言中使用swizzle method (交换方法来实现) 实际上静态C语言中的函数也是有办法hook的,这也说明绝对的静态语言是不存在的 Mach-O:对于每个操作 ...

  9. babel初学教程

    babel安装 安装前你需要安装node.js和npm以及gulp三个包. 然后执行以下命令 $ npm init 然后在安装 babel和babel-core两个包 $ npm install -- ...

  10. linux入门 配置网络

    我因为有自己的ssr,因此想让虚拟机共享我的ssr,并且不想搞的太麻烦,特此记录一下 1. 获取本机的ip 在命令行里输入ipconfig /all 获取本机IP,如下图所示,我本机ip为10.3.7 ...