html文件上传小技巧/原生态_html/css_WEB-ITnose
引语:大家都知道,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, 让你的网页更自由!

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

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

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

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
