1.首先实现大文件上传，如果是几兆或者几十兆的文件就用基本的上传方式就可以了，但是如果是大文件上传的话最好是用分片上传的方式。我这里主要是使用在客户端进行分片读取到服务器段，然后保存，到了服务器段读取完了之后将分片数据进行组合。
2.前端代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Html5UploadTest.UploadTest2" %><html lang="zh-CN"><head><meta charset="utf-8"><title>HTML5大文件分片上传示例</title><script src="Scripts/jquery-1.8.2.js"></script><link href="bootstrap-progressbar/bootstrap-progressbar-3.3.4.css" rel="stylesheet" /><script src="bootstrap-progressbar/bootstrap-progressbar.js"></script><%--<link href="JqueryUI/jquery-ui.css" rel="stylesheet" /><script src="JqueryUI/jquery-ui.js"></script>--%><script>function uploadFile() {$("#upload").attr("disabled", "disabled");var file = $("#file")[0].files[0], //文件对象fileNum = $("#file")[0].files[0].length,name = file.name, //文件名size = file.size, //总大小succeed = 0;var shardSize = 2 * 1024 * 1024, //以2MB为一个分片shardCount = Math.ceil(size / shardSize); //总片数$('.progress .progress-bar').attr('data-transitiongoal', 0).progressbar({ display_text: 'fill' });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: "Upload.ashx",type: "POST",data: form,async: true, //异步processData: false, //很重要，告诉jquery不要对form进行处理contentType: false, //很重要，指定为false才能形成正确的Content-Typesuccess: function () {++succeed;$("#output").text(succeed + " / " + shardCount);var percent = ((succeed / shardCount).toFixed(2)) * 100;updateProgress(percent);if (succeed == shardCount) {$("#upload").removeAttr("disabled");}}});}}function progress(percent, $element) {var progressBarWidth = percent * $element.width() / 100;$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");}//$(document).ready(function () {// $('.progress .progress-bar').progressbar({ display_text: 'fill' });//});function updateProgress(percentage) {$('.progress .progress-bar').attr('data-transitiongoal', percentage).progressbar({ display_text: 'fill' });}</script></head><body><input type="file" id="file" /><button id="upload" onclick="uploadFile();">上传</button><span id="output" style="font-size: 12px">等待</span><div class="progress"><div id="progressBar" class="progress-bar" role="progressbar" data-transitiongoal=""></div></div></body></html>
新闻热点
疑难解答
图片精选
