文件上传

    在谈谈文件上传前，我想分享一个事儿。很多年，我听了一个篮球比赛解说员在解说一场篮球比赛，他当时在直播中是这样回应了喷他的人的（大致内容）：早上小巷子里有很多为上班族提供早餐的，卖包子油条都有，当你买了一家的包子，觉得不好吃，并不需要破口放粗话，只需要换另一家买早餐就好了。生活中，在很多事情上确实也是这个道理（额外注释：在撸游戏中遇到猪一样的队友就不一样嘞，都忍不住BB几句）。

    在以下谈到的上传文件中，主要是js+jq+html。，html代码中用到了input控件，h5中input控件支持multiple属性，可以一次选中多个文件。js中用到了两个很关键的对象：FormData，负责表单数据；XMLHttpRequest，负责请求。对于h5的input、FormData、XMLHttpRequest的详细介绍，需要的朋友可以到w3school查阅or百度这几个关键词。分享了两个例子：单文件上传和多文件上传。这两个文件上传都是带有进度条的。

    下面贴出关键代码(不包含后台处理文件代码):

1、单文件上传

html：

<div class="picture" id="pic_cont">
    <ul>
       <li class="uploading" style="display:none;"><div class="rad-prg" id="indicatorContainer"></div></li>
    </ul>                
</div>
<a class="pic" onclick="AddImg()"></a>
<div class="hidden" style="display:none;z-index:-10;">
    <input id="UpFile" type="file" />
</div>

js：

    $(function () {
    $("#UpFile").change(function (e) {
            FileUpload();
            e.stopPropagation();
        })
    });
    //add image
    function AddImg() {
        $("#UpFile").click();
    };
    // upload file
    function FileUpload() {
        var mid = $("#hiddMid").val();
        var fileObj = document.getElementById("UpFile").files[0];
        $("#indicatorContainer").parent("li").show();
        var form = new FormData();
        form.append("mid", mid);
        form.append("file", fileObj);
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");   //IE5、IE6
        }
        if (xhr != null) {
            xhr.open("post", "/Tools/UploadMiniImage", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var result = eval("(" + xhr.responseText + ")");
                    }
                    else {
                        //alert("Problem retrieving XML data");
                    }
                }
            }
            if (typeof window.addEventListener != "undefined") {
                xhr.upload.addEventListener("progress", progressBar, false);
            }
            else {
                xhr.upload.attachEvent("progress", progressBar);   //ie
            }
            xhr.send(form);
        }
        else alert("强烈建议升级浏览器!");
    };

    //progress bar
    function progressBar(evt) {
        if (evt.lengthComputable) {
            var pros = Math.round(evt.loaded / evt.total * 100);
            fileUpBar.value(pros);
        }
    };

2、多文件上传

html：

<div class="picture" id="pic_cont">
    <ul>
       <li class="uploading" style="display:none;"><div class="rad-prg" id="indicatorContainer"></div></li>
    </ul>                
</div>
<a class="pic" onclick="AddImg()"></a>
<div class="hidden" style="display:none;z-index:-10;">
    <input id="UpFile" type="file" multiple="multiple" />
</div>

js：

    $(function () {
    $("#UpFile").change(function (e) {
            FileUpload();
            e.stopPropagation();
        })
    });
    //add image
    function AddImg() {
        $("#UpFile").click();
    };
    // upload file - multiple
    function FileUpload() {
        var oversize = "";
        var mid = $("#hiddMid").val();
        var fileList = document.getElementById("UpFile").files;
        var goimg = false;
        var form = new FormData();
        form.append("mid", mid);
        for (var i = 0; i < fileList.length; i++) {
            if (fileList[i].size < (10 * 1024 * 1024)) {
                form.append("file", fileList[i]);
                goimg = true;
            }
            else {
                oversize += fileList[i].name + " 超过10M，";
            }
        }
        if (goimg) $("#indicatorContainer").parent("li").show();
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");   //IE5、IE6
        }
        if (xhr != null) {
            xhr.open("post", "/Tools/UploadMultiMiniImage", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var result = eval("(" + xhr.responseText + ")");
                        
                    }
                    else {
                        //alert("Problem retrieving XML data");
                    }
                }
            }
            if (typeof window.addEventListener != "undefined") {
                xhr.upload.addEventListener("progress", progressBar, false);
            }
            else {
                xhr.upload.attachEvent("progress", progressBar);   //ie
            }
            xhr.send(form);
        }
        else alert("强烈建议升级浏览器!");
        if (oversize != "") alert(oversize);
    };

    //progress bar
    function progressBar(evt) {
        if (evt.lengthComputable) {
            var pros = Math.round(evt.loaded / evt.total * 100);
            fileUpBar.value(pros);
        }
    };

    单文件上传和多文件上传的原理都一样的，只有在代码处理上的一些差异。