h5在网页中上传超大文件教程实例
在网页中直接上传大文件一直是个比较头疼的问题，主要面临的问题一般包括两类：一是上传时间长中途一旦出错会导致前功尽弃；二是服务端配置复杂，要考虑接收超大表单和超时问题，如果是托管主机没准还改不了配置，默认只能接收小于4MB的附件。
比较理想的方案是能够把大文件分片，一片一片的传到服务端，再由服务端合并。这么做的好处在于一旦上传失败只是损失一个分片而已，不用整个文件重传，而且每个分片的大小可以控制在4MB以内，服务端不用做任何设置就可适应。
常用的解决方案是RIA，以flex为例，通常是利用FileReference.load方法加载文件得到ByteArray，然后分片构造表单（flash的高版本不允许直接访问文件）。不过这个load方法只能加载较小的文件，大约不超过300MB，因此适用性不是很强。
好在现在有了HTML5，我们可以直接构造分片了，这是一个非常喜人的进步，只可惜目前适用面不广（IE啊IE，真是恨你恨得牙痒痒）。
言归正传，来看一个DEMO吧，基于ASP.Net MVC3，只是示例，很多问题做了简化处理。
主要是客户端，新特性都体现在这里：
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>HTML5大文件分片上传示例</title>
<script src="../Scripts/jquery-1.11.1.min.js"></script>
<script>
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 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); //当前是第几片
//Ajax提交
$.ajax({
url: "../File/Upload",
type: "POST",
data: form,
async: true, //异步
processData: false, //很重要，告诉jquery不要对form进行处理
contentType: false, //很重要，指定为false才能形成正确的Content-Type
success: function(){
++succeed;
$("#output").text(succeed + " / " + shardCount);
}
});
}
}
};
$(function(){
page.init();
});
</script>
</head>
<body>
<input type="file" id="file" />
<button id="upload">上传</button>
<span id="output" style="font-size:12px">等待</span>
</body>
</html>这里的slice方法和FormData都是html5之前不存在的。通过这样的方法，我们的表单构造出来是这样的，抓包看看：
可以看到构造出来的Content-Type是multipart/form-data，也就是符合RFC标准的那个最传统的文件上传表单。另外我们同时传输的name、total等属性也都在表单里。
然后是服务端，没什么新鲜的，完全是在接收一个普通的文件：
[HttpPost]
public ActionResult Upload()
{
//从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 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 });
}上面的DEMO很多问题是简化处理的，比如没做什么异常处理，客户端也没有判断服务端是否出错重试一类的，各位可以自己完善。
在上面的基础上，我们可以做很多功能上的扩展，比如我们可以控制所有分片是顺序上传还是并发上传，以适用不同应用。再比如我们可以在整体文件上传前以及分片上传前都先计算一下相应的HASH，发个请求询问服务器文件是否已存在，如果存在就不要重复上传了，这样就实现了“极速上传”以及“断点续传”
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
Atas ialah kandungan terperinci h5在网页中上传超大文件教程实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Bagaimana untuk memulihkan fail WeChat yang telah tamat tempoh Bolehkah fail WeChat yang telah tamat tempoh dipulihkan?
Feb 22, 2024 pm 02:46 PM
Buka WeChat, pilih Tetapan dalam Saya, pilih Umum dan kemudian pilih Ruang Storan, pilih Pengurusan dalam Ruang Storan, pilih perbualan di mana anda ingin memulihkan fail dan pilih ikon tanda seru. Tutorial Model Berkenaan: iPhone13 Sistem: iOS15.3 Versi: WeChat 8.0.24 Analisis 1 Mula-mula buka WeChat dan klik pilihan Tetapan pada halaman Saya. 2 Kemudian cari dan klik Pilihan Umum pada halaman tetapan. 3Kemudian klik Ruang Storan pada halaman umum. 4 Seterusnya, klik Urus pada halaman ruang storan. 5Akhir sekali, pilih perbualan di mana anda ingin memulihkan fail dan klik ikon tanda seru di sebelah kanan. Tambahan: Fail WeChat biasanya tamat tempoh dalam beberapa hari Jika fail yang diterima oleh WeChat belum diklik, sistem WeChat akan mengosongkannya selepas 72 jam Jika fail WeChat telah dilihat.
Foto tidak boleh membuka fail ini kerana format tidak disokong atau fail rosak
Feb 22, 2024 am 09:49 AM
Di Windows, apl Photos ialah cara yang mudah untuk melihat dan mengurus foto dan video. Melalui aplikasi ini, pengguna boleh mengakses fail multimedia mereka dengan mudah tanpa memasang perisian tambahan. Walau bagaimanapun, kadangkala pengguna mungkin menghadapi beberapa masalah, seperti menghadapi mesej ralat "Fail ini tidak boleh dibuka kerana format tidak disokong" semasa menggunakan apl Foto atau kerosakan fail semasa cuba membuka foto atau video. Keadaan ini boleh mengelirukan dan menyusahkan pengguna, memerlukan beberapa penyiasatan dan pembetulan untuk menyelesaikan isu tersebut. Pengguna melihat ralat berikut apabila mereka cuba membuka foto atau video pada apl Foto. Maaf, Foto tidak boleh membuka fail ini kerana format tidak disokong atau fail pada masa ini
Persediaan untuk penyingkiran mengambil masa yang lama dalam Windows 11/10
Feb 19, 2024 pm 07:42 PM
Dalam artikel ini, kami akan memperkenalkan cara menyelesaikan masalah gesaan "Bersedia untuk memadam" apabila memadam fail atau folder dalam sistem Windows. Gesaan ini bermakna sistem sedang menjalankan beberapa operasi latar belakang, seperti menyemak kebenaran fail, mengesahkan sama ada fail itu diduduki oleh program lain, mengira saiz item yang akan dipadamkan, dsb. Kami akan memberikan anda beberapa penyelesaian untuk memastikan anda berjaya memadamkan fail anda tanpa menunggu terlalu lama. Mengapakah Windows mengambil masa yang lama untuk memadam fail? Masa yang diperlukan Windows untuk menyediakan fail untuk pemadaman dipengaruhi oleh pelbagai faktor, termasuk saiz fail, kelajuan peranti storan dan proses latar belakang. Gesaan "Bersedia untuk memadam" yang panjang atau tersekat mungkin menunjukkan sumber sistem yang tidak mencukupi, ralat cakera atau isu sistem fail. wujud
Bolehkah fail format Tmp dipadamkan?
Feb 24, 2024 pm 04:33 PM
Fail format Tmp ialah format fail sementara yang biasanya dihasilkan oleh sistem atau program komputer semasa pelaksanaan. Tujuan fail ini adalah untuk menyimpan data sementara untuk membantu program berjalan dengan betul atau meningkatkan prestasi. Sebaik sahaja pelaksanaan program selesai atau komputer dimulakan semula, fail tmp ini selalunya tidak diperlukan lagi. Oleh itu, untuk fail format Tmp, ia pada asasnya boleh dipadam. Selain itu, pemadaman fail tmp ini boleh mengosongkan ruang cakera keras dan memastikan operasi normal komputer. Walau bagaimanapun, sebelum memadam fail format Tmp, kita perlu
Apa yang perlu dilakukan jika kod ralat 0x80004005 muncul Editor akan mengajar anda cara menyelesaikan kod ralat 0x80004005.
Mar 21, 2024 pm 09:17 PM
Apabila memadam atau menyahmampat folder pada komputer anda, kadangkala kotak dialog segera "Ralat 0x80004005: Ralat Tidak Ditentukan" akan muncul Bagaimana anda harus menyelesaikan situasi ini? Sebenarnya terdapat banyak sebab mengapa kod ralat 0x80004005 digesa, tetapi kebanyakannya disebabkan oleh virus. Kami boleh mendaftarkan semula dll untuk menyelesaikan masalah tersebut . Sesetengah pengguna digesa dengan kod ralat 0X80004005 apabila menggunakan komputer mereka Ralat 0x80004005 disebabkan terutamanya oleh komputer tidak mendaftarkan fail perpustakaan pautan dinamik tertentu dengan betul, atau oleh tembok api yang tidak membenarkan sambungan HTTPS antara komputer dan Internet. Jadi bagaimana pula
Bagaimana untuk memindahkan fail dari Cakera Awan Quark ke Cakera Awan Baidu?
Mar 14, 2024 pm 02:07 PM
Quark Netdisk dan Baidu Netdisk pada masa ini merupakan perisian Netdisk yang paling biasa digunakan untuk menyimpan fail Jika anda ingin menyimpan fail dalam Quark Netdisk ke Baidu Netdisk, bagaimana anda melakukannya? Dalam isu ini, editor telah menyusun langkah tutorial untuk memindahkan fail dari komputer Quark Network Disk ke Baidu Network Disk Mari kita lihat cara mengendalikannya. Bagaimana untuk menyimpan fail dari Cakera Rangkaian Quark ke Cakera Rangkaian Baidu? Untuk memindahkan fail daripada Cakera Rangkaian Quark ke Cakera Rangkaian Baidu, anda perlu memuat turun fail yang diperlukan terlebih dahulu daripada Cakera Rangkaian Quark, kemudian pilih folder sasaran dalam klien Cakera Rangkaian Baidu dan bukanya. Kemudian, seret dan lepaskan fail yang dimuat turun daripada Cakera Awan Quark ke dalam folder yang dibuka oleh klien Cakera Awan Baidu, atau gunakan fungsi muat naik untuk menambah fail pada Cakera Awan Baidu. Pastikan anda menyemak sama ada fail telah berjaya dipindahkan dalam Cakera Awan Baidu selepas muat naik selesai. Itu sahaja
Bagaimana untuk memasang fail GHO
Feb 19, 2024 pm 10:06 PM
Fail gho ialah fail imej GhostImage, yang biasanya digunakan untuk menyandarkan keseluruhan cakera keras atau data partition ke dalam fail. Dalam beberapa kes tertentu, kami perlu memasang semula fail gho ini kembali ke cakera keras untuk memulihkan cakera keras atau partition kepada keadaan sebelumnya. Berikut akan memperkenalkan cara memasang fail gho. Pertama, sebelum pemasangan, kita perlu menyediakan alat dan bahan berikut: Fail gho entiti: Pastikan anda mempunyai fail gho yang lengkap, yang biasanya mempunyai akhiran .gho dan mengandungi sandaran
Apakah fail hiberfil.sys? Bolehkah hiberfil.sys dipadamkan?
Mar 15, 2024 am 09:49 AM
Baru-baru ini, ramai netizen bertanya kepada editor, apakah itu fail hiberfil.sys? Bolehkah hiberfil.sys mengambil banyak ruang pemacu C dan dipadamkan? Editor boleh memberitahu anda bahawa fail hiberfil.sys boleh dipadamkan. Mari kita lihat butiran di bawah. hiberfil.sys ialah fail tersembunyi dalam sistem Windows dan juga fail hibernasi sistem. Ia biasanya disimpan dalam direktori akar pemacu C, dan saiznya bersamaan dengan saiz memori yang dipasang sistem. Fail ini digunakan apabila komputer sedang hibernasi dan mengandungi data memori sistem semasa supaya ia boleh dipulihkan dengan cepat kepada keadaan sebelumnya semasa pemulihan. Oleh kerana saiznya adalah sama dengan kapasiti memori, ia mungkin mengambil jumlah ruang cakera keras yang lebih besar. hiber
