基于jquery的ajax上传文件代码，可以显示上传进度

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

偶然间发现，我几年前写的手机版会员中心代码，还在使用。这里记录下当年做的ajax上传显示进度的js。主要功能点就是：“控制”上传按钮样式，显示文件上传进度。

html部分

<div class="upload_box">
  <input type="file" accept="image/*" capture="camera" data="idcard_front" />
  <a href="#">点击上传身份</a>
</div>

css部分

.upload_box {
    height: 1.5rem;
    position: relative;
    border: 2px solid #e3e3e3;
    margin: 0 1%;
    width: 98%;
}
.upload_box input {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 89;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    cursor: pointer;
}
.upload_box a {
    background: #ffebcc none repeat scroll 0 0;
    border: 2px solid #e3e3e3;
    color: #666;
    display: block;
    font-size: 0.6rem;
    line-height: 1.5rem;
    text-align: center;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    z-index: 1;
    border: none !important;
}

js部分

$(function() {
    // window.onerror = function (sMsg, sUrl, sLine) {
    //     go_error("上传出错了，请检查您的浏览器是否有相关读取图片信息的权限");
    //     return true;
    // }
    $("input[type='file']").change(function() {
        var file = $(this)[0].files[0];
        var id = $(this).attr("data");
        if (file === null || file === undefined) {
            go_error("请选择您要上传的文件！");
            return false;
        }
        //检测文件类型
        if (file.type.indexOf('image') === -1) {
            go_error("您上传的文件无法被检测为图片~，可能是浏览器权限问题。");
            return false;
        }
        var size = Math.floor(file.size / 1024);
        if (size > upload_max * 1000) {
            go_error("上传文件不得超过" + upload_max + "M!");
            return false;
        }
        loading_txt("正在上传图片，请稍等...");
        var file_obj = this.files[0];
        go_upload_upload(file_obj, id,
        function(json) {
            go_with_json(json);
            hide_loading();
        });
    });
    function progress(evt) {
        if (evt.lengthComputable) {
            var per = evt.loaded / evt.total * 100;
            show_loading();
            var percent = per.toFixed(2);
            if (!isNaN(percent)) {
                loading_txt("上传进度：" + percent + "%");
                if (per >= 100) {
                    loading_txt("服务器正在处理您的图片，请稍等...");
                }
            }
        }
    }
    var debug = "";
    function go_upload_upload(content, id, callback) {
        show_loading();
        loading_txt("正在上传，请稍等...");
        var data = new FormData();
        data.append('file', content);
        data.append('type', id);
        $.ajax({
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                xhr.upload.addEventListener('progress', progress, false);
                return xhr;
            },
            async: true,
            url: "/user/upload",
            type: "POST",
            dataType: 'json',
            jsonp: 'callback',
            processData: false,
            contentType: false,
            data: data,
            timeout: 60000, //毫秒
            success: function(json) {
                if (typeof callback === 'function') {
                    callback(json);
                }
            },
            error: function(json) {
                go_with_error_json(json);
            },
            complete: function() {}
        });
    }
    function go_error(str){
    }
    function loading_txt(str){
    }
    function go_with_json(str){
    }
    function show_loading(str){
    }
    function hide_loading(){
    }
});

原理上来说，就是在按钮上面覆盖一个<input type="file">，但是文件选择框的zindex值要大一些，而且要设置为透明的。这样的话，就能“控制”上传按钮的样式了。（其实只是把真的上传按钮给隐藏掉了，然后留了一个假的可控按钮在那里。）

总结

这个，其实这个也是一种黑客攻击的手段，在诱导目标点击上覆盖透明的真正点击点。所以，技术是一个层面，如何利用是另外一个层面的事情了。黑客诱导攻击时，透明层会是一个iframe目标页面，一般都是个需要权限的页面。而诱导层就是根据需要和iframe目标页面进行对接了。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。