Rumah hujung hadapan web html tutorial 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>
Salin selepas log masuk

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

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

See all articles