html文件上传小技巧/原生态_html/css_WEB-ITnose

引语:大家都知道,html中上传文件就一个input,type=file就搞定了。但是,这个标签的样式,实在不值得提点什么,要改动他的样式,恐怕也是较难的。但是其实挺简单,今天就来说说上传文件小技巧吧!1. 怎样自定义样式?

1. 只管按照自己喜欢看到的样式去定义即可,如,可以是背景图片效果,可以是文字指示,总之想怎么改怎么改!有了按钮,还需要一个文件名容器,用来存放选择上传文件时的名字,从而不让上传看起来枯涩难懂。2. 添加真正需要上传的文件控件,并设置属性display:none;如 , 这样就有了真正的上传文件的地方了。所以,可以说,上传文件的界面有多漂亮取决你的想象力!2. 怎样触发事件?

这是个重点,触发的点应该是自己写的样式处,而真正起作用的元素却是隐藏的,但是并不影响它的点击效果,只需要给它触发一个点击事件即可,如$('#target-file').trigger('click');3. 多选文件?

多文件上传,只需使用html的一个file的multiple=true即可,当然你也可以选择第三方的上传控件,如swfupload,效果是真心不错的,但是对于不想用的插件的人,就不起作用了。 4. 相关插件?

界面美化其实可以使用jqueryui等插件;

要做一些友好的交互的话,都会用到ajax技术,无刷新切换、异步上传、提交,最后,其实ajax的路径也是可以保留的,使用pushState, replaceState 实现 pjax .

表单验证:validform.js

异步提交文件: jquery.form.js

友好的弹窗提示:layer.js

5. 一点兼容性的问题?

做界面方面的工作,最怕的也是很重要的工作,就是各个浏览器之间的兼容性问题,下面主要列几点供参考:

table宽度的处理方式不一致;

select, input显示高度不一致;

alert弹窗不一致;

...

6. 演示代码?

本地上传打包工具<script>    $(function(){        var alertTitle = '系统提示:';        var submitId = '#do-submit';        $('#taskForm').Validform({            btnSubmit: submitId,            tiptype: 1,            ignoreHidden: true,            dragonfly: false,            tipSweep: true,            label: ".label",            showAllError: false,            postonce: true,            ajaxPost: true,            datatype:{            },            beforeCheck:function(curform){            },            beforeSubmit:function(curform){                $('.upload-file-real').attr('disabled', 'disabled');                $(submitId).attr('disabled', 'disabled');   //提交前禁用按钮                ajaxSubmitForm(curform);                $(submitId).removeAttr('disabled');         //失败后恢复可提交                return false;            },            submitForm: function(){}                        //不再起作用        });        //切换上传方法        $('.switch-upload-method').off().on('click', function(){//            $(submitId).attr('disabled', 'disabled');            var pObj = $(this).parent().find('.switch-upload-method');            var index = pObj.index(this);            var uploadTypeId = $('#upload-type-id').val();                      //上传方式:1:打包工具;2:本地上传,0:没有上传方式            var uploadType = $(this).attr('up-type-id');            if(parseInt($('#sub-channel-count').html()) > 0){                if(uploadTypeId != uploadType){                    layer.alert('还有子渠道包数据,不能完成切换,请先确认清除再切换!');                    return false;                }            }            pObj.not(':eq(' + index + ')').removeClass('btn-danger').addClass('btn-default');            pObj.eq(index).removeClass('btn-default').addClass('btn-danger');            if(uploadType == 36){               //local-upload                $('#upload-type-id').val(uploadType);                $('#init-apk-container').show();                $('#apk-tool-container').hide();                $('#upload-main-control').find('.del-it-main').css({display: 'inline-block'});                $('#local-upload-real-file').trigger('click');            }else if(uploadType == 35){         //apk-tool                $('#upload-type-id').val(uploadType);                $('#init-apk-container').hide();                $('#local-upload-container').hide();                $('#upload-main-control').find('.del-it-main').hide();                $('#apk-tool-container').show();            }        });        //本地上传        $('#local-upload-real-file').off().on('change', function(){            if(!$(this).val()){                return false;            }            file_size = 0;            filepath = $(this).val();            maxFileSize = 30 * 1024 * 1024;            var  browserCfg = {};            var ua = window.navigator.userAgent;            if (ua.indexOf("MSIE") >=1 ){                browserCfg.ie = true;            }else if(ua.indexOf("Firefox") >=1 ){                browserCfg.firefox = true;            }else if(ua.indexOf("Chrome") >=1 ){                browserCfg.chrome = true;            }            if (browserCfg.ie) {                var img = new Image();                img.src = filepath;                file_size = img.fileSize;                while (true) {                    if (img.fileSize > 0) {                        if (img.fileSize > maxFileSize) {                            alert("上传包超过30MB限制,请使用打包工具上传!");                            return false;                        }                        break;                    }                }            } else {                file_size = this.files[0].size;                if (file_size > maxFileSize) {                    alert("上传包超过30MB限制,请使用打包工具上传!");                    return false;                }            }            var responseObjId = $(this).attr('response-id');            var responseObj = $('#' + responseObjId);            $('#taskForm').ajaxSubmit({                url:'/aa/bb/uploadTmpApk',                resetForm: false,                dataType:  'json',                beforeSubmit:  function(option){                    window.loading = layer.load(2);                },                success: function(data, statusText){                    layer.close(window.loading);                    if(data.status == 1){                        $('#version-identifier').val(data.version);                        responseObj.html(data.apkInfoHtml);                        responseObj.show();                        var delObj = $('#upload-main-control').find('.del-it-main');                        delObj.css({'display': 'inline-block'});                        $('#sub-channel-count').html(data.apkTotal);                        $('#init-apk-container').hide();                        $(submitId).removeAttr('disabled');                    }else{                        layer.alert(data.info, {title: alertTitle});                    }                },                error: function(data){                    layer.close(window.loading);                    layer.alert('未知错误,请稍后再试!');                }            });            return false;//防止dialog 自动关闭        });        //打包工具        $('#apk-tool-real-file').off().on('change', function(){            if(!$(this).val()){                return false;            }            var responseObjId = $(this).attr('response-id');            var responseObj = $('#' + responseObjId);            $('#Form').ajaxSubmit({                url:'/aa/bb/uploadTmpApkTool',                resetForm: false,                dataType:  'json',                beforeSubmit:  function(option){                    window.loading = layer.load(2);                },                success: function(data, statusText){                    layer.close(window.loading);                    if(data.status == 1){                        $('#version-identifier').val(data.version);                        responseObj.html(data.infoHtml);                        var parentContainer = responseObj.parent().parent(),                            nameContainer = parentContainer.find('.apk-name-container'),                                delObj = parentContainer.find('.del-it-apk-tool');                        nameContainer.html(data.apkName);                        nameContainer.attr('title', data.apkName);                        $('#apk-tool-file-tmp').html(data.fileInfo);                        $(submitId).removeAttr('disabled');                    }else{                        layer.alert(data.info, {title: alertTitle});                    }                },                error: function(data){                    layer.close(window.loading);                    layer.alert('未知错误,请稍后再试!');                }            });            return false;//防止dialog 自动关闭        });        $('.apk-tool-upload-button').on('click', function(){            $('#apk-tool-real-file').trigger('click');        });    });</script>

以上,主要就是,使用隐藏的input file标签选择,选择文件之后立即ajax提交,最后,整个表单ajax提交的过程。

合理使用一些css, js, 让你的网页更自由!

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: