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

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

jquery的ajax上传文件,并显示进度 - uploading
jquery的ajax上传文件,并显示进度(图1-1)

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(){
    }
});

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

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

 【源码】代码片段及相关软件点此获取

 【jquery】秘籍文章入口,仅传授于有缘之人   jquery

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!