Maison interface Web tutoriel HTML html文件上传小技巧/原生态_html/css_WEB-ITnose

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

Jun 21, 2016 am 08:48 AM

引语:大家都知道,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. 演示代码?

<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>
Copier après la connexion

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

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

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

Comprendre HTML, CSS et JavaScript: un guide pour débutant Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Apr 04, 2025 pm 11:30 PM

L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Apr 05, 2025 am 06:15 AM

Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

HTML, CSS et JavaScript: outils essentiels pour les développeurs Web HTML, CSS et JavaScript: outils essentiels pour les développeurs Web Apr 09, 2025 am 12:12 AM

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

See all articles