文件上传小技巧/原生态html篇

Posted 等你归去来

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文件上传小技巧/原生态html篇相关的知识,希望对你有一定的参考价值。

  引语:大家都知道,html中上传文件就一个input,type=file就搞定了。但是,这个标签的样式,实在不值得提点什么,要改动他的样式,恐怕也是较难的。但是其实挺简单,今天就来说说上传文件小技巧吧!
  1. 怎样自定义样式?
    1. 只管按照自己喜欢看到的样式去定义即可,如<a href=‘javascript:;‘ class=‘upload-button‘></a>,可以是背景图片效果,可以是文字指示,总之想怎么改怎么改!有了按钮,还需要一个文件名容器,用来存放选择上传文件时的名字,从而不让上传看起来枯涩难懂。2. 添加真正需要上传的文件控件,并设置属性display:none;如 <input type=‘file‘ class=‘hide‘ />, 这样就有了真正的上传文件的地方了。所以,可以说,上传文件的界面有多漂亮取决你的想象力!
  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. 演示代码?
<a href="javascript:;" up-type-id="1" class="btn btn-default small-btn switch-upload-method"><span>本地上传</span></a>
<a href="javascript:;" up-type-id="2" class="upload-file-instead btn btn-default small-btn switch-upload-method"><span>打包工具</span></a>
<input type="file" name="apkFiles[]" id="local-upload-real-file" class="upload-file-real hide" response-id="local-upload-container" multiple=‘true‘  />
<input type="file" name="apkToolFiles[]" id="apk-tool-real-file" class="upload-file-real hide" response-id="apk-tool-container-textarea" />
<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, 让你的网页更自由!

以上是关于文件上传小技巧/原生态html篇的主要内容,如果未能解决你的问题,请参考以下文章

Android课程---Android Studio使用小技巧:提取方法代码片段

一个简单小技巧实现手机访问.html文件网页效果

VS中添加自定义代码片段——偷懒小技巧

提效小技巧——记录那些不常用的代码片段

Fiddler小技巧-测试上传文件接口

vscode 开发微信小程序环境配置