文件上傳小技巧/原生態【html篇】

時間 2019-11-21

標籤文件上傳技巧生態 html篇欄目 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>