引语:大家都知道,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>
以上,主要就是,使用隐藏的input file标签选择,选择文件之后立即ajax提交,最后,整个表单ajax提交的过程。
合理使用一些css, js, 让你的网页更自由!

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

The article explains the HTML 'class' attribute's role in grouping elements for styling and JavaScript manipulation, contrasting it with the unique 'id' attribute.

Article discusses HTML list types: ordered (<ol>), unordered (<ul>), and description (<dl>). Focuses on creating and styling lists to enhance website design.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Atom editor mac version download
The most popular open source editor

Notepad++7.3.1
Easy-to-use and free code editor

Dreamweaver Mac version
Visual web development tools

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
