html5 文件上传与图片预览-优快云博客

本文介绍了一个使用JavaScript和jQuery实现的文件上传功能，该功能允许用户在上传图片文件后立即预览图片，并通过AJAX进行异步提交。此外，还提供了一个上传进度的监听功能。

<script type="text/javascript">
        $(":file").change(function () {
            var appendImg = $(this).parent();
            var reader = new FileReader();
            reader.readAsDataURL(this.files[0]);
            reader.onload = function (e) {
                //var str = "<img src='" + e.target.result + "'/>";
                //appendImg.append(str);
                //appendImg.css('background-image', e.target.result);
                appendImg.css("background-image", "url(" + e.target.result + ")");
                appendImg.css("background-size", "cover");
            }
        })

        $('.btn_submit_apply').click(function () {
            var formData = new FormData($('.formbox')[0]);
            $.ajax({
                type: 'post',
                //url: '../../../material/jQueryFileUpload?type=1',
                data: formData,
                contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置(详见：)
                processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post，详见：)
                xhr: xhrOnProgress(function (e) {// (详见：)
                    var percent = e.loaded / e.total;//计算百分比
                    $('body').append('->' + percent);
                    //alert(percent);
                }),
                success: function (data) {
                    //$('body').append('完成');
                    if (data.Success) {
                        alert(data.Msg);
                        location.href = "@Url.Action("Index")";
                    } else {
                        alert(data.Msg);
                    }
                }
            })
        })
        // 监听上传进度
        var xhrOnProgress = function (fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
            return function () {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        }
    </script>