记录小文件上传的几个例子（含进度条效果，附源码下载）

    <form enctype="multipart/form-data" action="UploadFile_1" method="post" target="frameResult">
        <div class="item">
            <input id="File1" name="UserPhoto" type="file" value="" />
            <input type="submit" value="提交上传" />
            <iframe src="about:blank" id="frameResult" name="frameResult"></iframe>
        </div>
    </form>

        [HttpPost]
        public ActionResult UploadFile_1()
        {
            string result = "上传成功";
            HttpPostedFileBase file= Request.Files["UserPhoto"];
            file.SaveAs(Server.MapPath("~/Upload/")+ file.FileName);
            return Content(result);
        }

    var btnUpload = document.getElementById(‘btnUpload‘);
    btnUpload.onclick = function () {
        var fileInput = document.getElementById(‘File2‘);
        if (!fileInput.value) { return; }

        var feature = {};

        feature.fileapi = fileInput.files !== undefined;
        feature.formdata = (typeof window.FormData !== ‘undefined‘);

        if (!feature.fileapi || !feature.formdata) {
            showMessage(‘当前浏览器不支持Html5，请更换高级浏览器‘);
            return;
        }

        var xhr = new XMLHttpRequest();
        var formData = new FormData();
        formData.append("UserPhoto", fileInput.files[0]);
        xhr.open("post", ‘./UploadFile_2‘);

        //超时时间，单位是毫秒
        xhr.timeout = 60 * 1000;

        //请求结束
        xhr.onload = function (event) {
            if (xhr.status == 200) {
                showMessage("上传成功");
                return;
            }

            if (xhr.status == 404) {
                showMessage("请求路径错误");
                setProgressBar(0, ‘kb/s‘, ‘hide‘, ‘0%‘);
                return;
            }

            if (xhr.status == 500) {
                console.error(‘xhr.status == 500‘);
                showMessage("服务器异常");
            }
        };

        //请求异常(不包括404)
        xhr.onerror = function () {
            console.error(‘xhr.onerror‘);
            showMessage("请求发生异常");
        };

        //上传开始事件
        xhr.upload.onloadstart = function () {
            setProgressBar(0, ‘kb/s‘, ‘hide‘, ‘0%‘);
            lastTime = new Date().getTime();
            loadSize = 0;
        }

        //上传过程事件，间歇调用该方法用来获取上传过程中的信息
        xhr.upload.onprogress = function (event) {
            //ProgressEvent.lengthComputable：boolean类型，表示能否计算出文件长度；如果为false，那么ProgressEvent.total则为0.
            //简而言之，lengthComputabl等于true就可以做进度计算
            if (!event.lengthComputable) {
                return;
            }

            //计算上传速度,event.loaded是已发送的大小
            var now = new Date().getTime();
            var timeInterval = (now - lastTime) / 1000;
            lastTime = now;

            var sizeInterval = event.loaded - loadSize;
            loadSize = event.loaded;

            var speed = sizeInterval / timeInterval; // 单位b/s
            var bspeed = speed;
            var units = "b/s";

            if (speed / 1024 > 1) {
                speed = speed / 1024;
                units = ‘kb/s‘;
            }
            if (speed / 1024 > 1) {
                speed = speed / 1024;
                units = ‘mb/s‘;
            }

            speed = speed.toFixed(1);

            //计算剩余时间
            var resttime = ((event.total - event.loaded) / bspeed).toFixed(1); //单位 秒

            //计算进度百分比
            var precent = (100 * event.loaded / event.total);
            pre = Math.floor(precent);

            if (bspeed == 0) {
                //setProgressBar方法是控制进度条的，
                //这里代码没贴,在最后源码下载里有
                //四个参数：上传速度、单位、剩余时间、进度百分比
                setProgressBar(0, "b/s", ‘infinity‘, ‘noChange‘);
            } else {
                setProgressBar(speed, units, resttime, precent + ‘%‘);
            }
        };

        //上传终止
        xhr.upload.onabort = function () {
            console.info(‘xhr.upload.onabort‘);
        }

        //上传异常事件
        //当网络环境正常时，XMLHttpRequest.status等于404、500并不能触发upload.onerror事件
        //当网络环境异常时（offline）,会触发upload.onerror事件
        xhr.upload.onerror = function () {
            console.error(‘xhr.upload.onerror‘);
        }

        //文件发送完毕事件
        //当网络环境正常时，即使XMLHttpRequest.status等于404、500，仍会被触发upload.onload事件
        //当网络环境异常时（offline）,不会触发upload.onload事件
        xhr.upload.onload = function () {
            console.info(‘xhr.upload.onload‘);
        }

        //上传超时
        xhr.upload.ontimeout = function () {
            console.error(‘xhr.upload.ontimeout‘);
        }

        //发送请求
        xhr.send(formData);
    }

        [HttpPost]
        public ActionResult UploadFile_2()
        {
            HttpPostedFileBase file = Request.Files["UserPhoto"];
            file.SaveAs(Server.MapPath("~/Upload/") + file.FileName);
            return Json("success");
        }

    $(‘#btnUpload3‘).click(function () {
        var $fileInput = $(‘#File3‘);
        if (!$fileInput.val()) { return; }

        var feature = {};
        //检查是否支持html5 api
        feature.fileapi = $fileInput.get(0).files !== undefined;
        feature.formdata = (typeof window.FormData !== ‘undefined‘);

        if (!feature.fileapi || !feature.formdata) {
            showMessage(‘当前浏览器不支持Html5，请更换高级浏览器‘);
            return;
        }

        var formData = new FormData();
        formData.append("UserPhoto", $fileInput[0].files[0]);
        $.ajax({
            type: ‘post‘,
            url: ‘./UploadFile_2‘,
            data: formData,
            processData: false,//设置为false。因为data值是FormData对象，不需要对数据做处理。
            contentType: false, //设置为false。告诉jQuery不要去设置Content-Type请求头
            xhr: function () {
                var xhr = $.ajaxSettings.xhr();

                if (xhr.upload) {
                    xhr.upload.onloadstart = uploadStart;
                    xhr.upload.onprogress = uploadProgress;
                    return xhr;
                }
            },
            success: function (data, textStatus, jqXHR) {
                showMessage("上传成功");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                showMessage("上传失败");
            }
        });
    });

    <form id="form4" enctype="multipart/form-data" action="UploadFile_2" method="post">
        <div class="item">
            <h3>
                4、异步表单插件jquery.form.js
            </h3>

            <input id="File4" name="UserPhoto" type="file" value="" />
            <input id="btnUpload4" type="button" value="提交上传" />
        </div>
    </form>

    $(‘#btnUpload4‘).click(function () {
        var $fileInput = $(‘#File4‘);
        if (!$fileInput.val()) { return; }

        var options = {
            type: ‘post‘,
            url: ‘./UploadFile_2‘,
            success: function (data, textStatus, jqXHR) {
                showMessage("上传成功");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                showMessage("上传失败");
            }
        }

        var feature = {};

        //检查是否支持html5 api
        feature.fileapi = $fileInput.get(0).files !== undefined;
        feature.formdata = (typeof window.FormData !== ‘undefined‘);

        //如果支持html5，那么就使用进度条
        if (feature.fileapi && feature.formdata) {
            options = $.extend(options, {
                xhr: function () {
                    var xhr = $.ajaxSettings.xhr();

                    if (xhr.upload) {
                        xhr.upload.onloadstart = uploadStart;
                        xhr.upload.onprogress = uploadProgress;
                        return xhr;
                    }
                }
            });
        }

        $("#form4").ajaxSubmit(options);
    });