這篇文章主要介紹了JavaScript File分段上傳的相關資料,需要的朋友可以參考下
    HTML
    <form method="POST" name="form" action="/mupload/upload/" enctype="multipart/form-data">
    <input type='hidden' name='csrfmiddlewaretoken' value='' />
    <input id='file' type='file' name='file' onchange="" />
    <input id='button' name='submit' type='button' value="上傳" onclick="chunk_upload(this)"/>
    </form>
    js方法
    var fileSplitSize = 1024 * 1024;
    var start=0,end=0;
    var i=0;
    // 文件段上傳
    function chunk_upload(button){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "/chunk_upload/upload/", false);
    xmlhttp.setRequestHeader("X-CSRFToken", button.form['csrfmiddlewaretoken'].value);
    var f = button.form;
    var file = f['file']['files'][0];
    var size=file.size;
    end=start+fileSplitSize;
    if(end>size){
    i=-1;
    end=size;
    }else{
    i+=1;
    end=end;
    }<br>　　//按大小切割文件段
    var blob = file.slice(start, end);
    xmlhttp.setRequestHeader('charset','utf-8');
    xmlhttp.setRequestHeader("fileMD5", fileMD5);
    xmlhttp.setRequestHeader("start", start);
    xmlhttp.setRequestHeader("end", end);
    xmlhttp.send(blob);
    if(xmlhttp.status==200){<br> if(end==size){<br> var backtext=xmlhttp.responseText;<br> alert(backtext);<br> }else{<br> alert("上傳完成第"+i+"段")<br> start=end;<br> chunk_upload(button);<br> }<br> }else{<br> alert("上傳錯誤");<br> chunk_upload(button);<br> }
    }
    主要思想：
    注意設置切割的起始位置和切割大小，通過XMLHttpRequest的發(fā)送請求（http協(xié)議要知道）。
    如果一些標記數(shù)據(jù)可以添加協(xié)議頭：xmlhttp.setRequestHeader("end", end);
    發(fā)送協(xié)議體xmlhttp.send(data);
    監(jiān)聽返回碼來判斷是否傳遞成功，在進行下一步操作。
    重新設置切割位置，然后遞歸調用自身start=end;chunk_upload(button);
    注意：
    切割的start與end和filesize的關系
    純js異步上傳文件，并返回上傳進度
    純js實現(xiàn)異步上傳文件，異步返回文件上傳進度，0.05到0.1秒回調一次上傳進度，其它詳細見代碼片段下用法注釋
    1. 簡單的異步上傳函數(shù)
    ;(function(window,document){
    var myUpload = function(option) {
    var file,
    fd = new FormData(),
    xhr = new XMLHttpRequest(),
    loaded, tot, per, uploadUrl,input;
    input = document.createElement("input");
    input.setAttribute('id',"myUpload-input");
    input.setAttribute('type',"file");
    input.setAttribute('name',"files");
    input.click();
    uploadUrl = option.uploadUrl;
    callback = option.callback;
    uploading = option.uploading;
    beforeSend = option.beforeSend;
    input.onchange= function(){
    file = input.files[0];
    if(beforeSend instanceof Function){
    if(beforeSend(file) === false){
    return false;
    }
    }
    fd.append("files", file);
    xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
    if(callback instanceof Function){
    callback(xhr.responseText);
    }
    }
    }
    //偵查當前附件上傳情況
    xhr.upload.onprogress = function(evt) {
    loaded = evt.loaded;
    tot = evt.total;
    per = Math.floor(100 * loaded / tot); //已經上傳的百分比
    if(uploading instanceof Function){
    uploading(per);
    }
    };
    xhr.open("post", uploadUrl);
    xhr.send(fd);
    }
    };
    window.myUpload = myUpload;
    })(window,document);
    //用法
    //觸發(fā)文件上傳事件
    myUpload({
    //上傳文件接收地址
    uploadUrl: "/async/myUpload.php",
    //選擇文件后，發(fā)送文件前自定義事件
    //file為上傳的文件信息，可在此處做文件檢測、初始化進度條等動作
    beforeSend: function(file) {
    },
    //文件上傳完成后回調函數(shù)
    //res為文件上傳信息
    callback: function(res) {
    },
    //返回上傳過程中包括上傳進度的相關信息
    //詳細請看res,可在此加入進度條相關代碼
    uploading: function(res) {
    }
    });