引语:大家都知道,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. 演示代码?
  1. <a href="javascript:;" up-type-id="1" class="btn btn-default small-btn switch-upload-method"><span>本地上传</span></a>
  2. <a href="javascript:;" up-type-id="2" class="upload-file-instead btn btn-default small-btn switch-upload-method"><span>打包工具</span></a>
  3. <input type="file" name="apkFiles[]" id="local-upload-real-file" class="upload-file-real hide" response-id="local-upload-container" multiple='true' />
  4. <input type="file" name="apkToolFiles[]" id="apk-tool-real-file" class="upload-file-real hide" response-id="apk-tool-container-textarea" />
  5. <script>
  6. $(function(){
  7. var alertTitle = '系统提示:';
  8. var submitId = '#do-submit';
  9. $('#taskForm').Validform({
  10. btnSubmit: submitId,
  11. tiptype: 1,
  12. ignoreHidden: true,
  13. dragonfly: false,
  14. tipSweep: true,
  15. label: ".label",
  16. showAllError: false,
  17. postonce: true,
  18. ajaxPost: true,
  19. datatype:{
  20. },
  21. beforeCheck:function(curform){
  22. },
  23. beforeSubmit:function(curform){
  24. $('.upload-file-real').attr('disabled', 'disabled');
  25. $(submitId).attr('disabled', 'disabled'); //提交前禁用按钮
  26. ajaxSubmitForm(curform);
  27. $(submitId).removeAttr('disabled'); //失败后恢复可提交
  28. return false;
  29. },
  30. submitForm: function(){} //不再起作用
  31. });
  32.  
  33. //切换上传方法
  34. $('.switch-upload-method').off().on('click', function(){
  35. // $(submitId).attr('disabled', 'disabled');
  36. var pObj = $(this).parent().find('.switch-upload-method');
  37. var index = pObj.index(this);
  38. var uploadTypeId = $('#upload-type-id').val(); //上传方式:1:打包工具;2:本地上传,0:没有上传方式
  39. var uploadType = $(this).attr('up-type-id');
  40. if(parseInt($('#sub-channel-count').html()) > 0){
  41. if(uploadTypeId != uploadType){
  42. layer.alert('还有子渠道包数据,不能完成切换,请先确认清除再切换!');
  43. return false;
  44. }
  45. }
  46. pObj.not(':eq(' + index + ')').removeClass('btn-danger').addClass('btn-default');
  47. pObj.eq(index).removeClass('btn-default').addClass('btn-danger');
  48. if(uploadType == 36){ //local-upload
  49. $('#upload-type-id').val(uploadType);
  50. $('#init-apk-container').show();
  51. $('#apk-tool-container').hide();
  52. $('#upload-main-control').find('.del-it-main').css({display: 'inline-block'});
  53. $('#local-upload-real-file').trigger('click');
  54. }else if(uploadType == 35){ //apk-tool
  55. $('#upload-type-id').val(uploadType);
  56. $('#init-apk-container').hide();
  57. $('#local-upload-container').hide();
  58. $('#upload-main-control').find('.del-it-main').hide();
  59. $('#apk-tool-container').show();
  60. }
  61. });
  62. //本地上传
  63. $('#local-upload-real-file').off().on('change', function(){
  64. if(!$(this).val()){
  65. return false;
  66. }
  67. file_size = 0;
  68. filepath = $(this).val();
  69. maxFileSize = 30 * 1024 * 1024;
  70. var browserCfg = {};
  71. var ua = window.navigator.userAgent;
  72. if (ua.indexOf("MSIE") >=1 ){
  73. browserCfg.ie = true;
  74. }else if(ua.indexOf("Firefox") >=1 ){
  75. browserCfg.firefox = true;
  76. }else if(ua.indexOf("Chrome") >=1 ){
  77. browserCfg.chrome = true;
  78. }
  79. if (browserCfg.ie) {
  80. var img = new Image();
  81. img.src = filepath;
  82. file_size = img.fileSize;
  83. while (true) {
  84. if (img.fileSize > 0) {
  85. if (img.fileSize > maxFileSize) {
  86. alert("上传包超过30MB限制,请使用打包工具上传!");
  87. return false;
  88. }
  89. break;
  90. }
  91. }
  92. } else {
  93. file_size = this.files[0].size;
  94. if (file_size > maxFileSize) {
  95. alert("上传包超过30MB限制,请使用打包工具上传!");
  96. return false;
  97. }
  98. }
  99.  
  100. var responseObjId = $(this).attr('response-id');
  101. var responseObj = $('#' + responseObjId);
  102. $('#taskForm').ajaxSubmit({
  103. url:'/aa/bb/uploadTmpApk',
  104. resetForm: false,
  105. dataType: 'json',
  106. beforeSubmit: function(option){
  107. window.loading = layer.load(2);
  108. },
  109. success: function(data, statusText){
  110. layer.close(window.loading);
  111. if(data.status == 1){
  112. $('#version-identifier').val(data.version);
  113. responseObj.html(data.apkInfoHtml);
  114. responseObj.show();
  115. var delObj = $('#upload-main-control').find('.del-it-main');
  116. delObj.css({'display': 'inline-block'});
  117. $('#sub-channel-count').html(data.apkTotal);
  118. $('#init-apk-container').hide();
  119. $(submitId).removeAttr('disabled');
  120. }else{
  121. layer.alert(data.info, {title: alertTitle});
  122. }
  123. },
  124. error: function(data){
  125. layer.close(window.loading);
  126. layer.alert('未知错误,请稍后再试!');
  127. }
  128. });
  129. return false;//防止dialog 自动关闭
  130. });
  131. //打包工具
  132. $('#apk-tool-real-file').off().on('change', function(){
  133. if(!$(this).val()){
  134. return false;
  135. }
  136. var responseObjId = $(this).attr('response-id');
  137. var responseObj = $('#' + responseObjId);
  138. $('#Form').ajaxSubmit({
  139. url:'/aa/bb/uploadTmpApkTool',
  140. resetForm: false,
  141. dataType: 'json',
  142. beforeSubmit: function(option){
  143. window.loading = layer.load(2);
  144. },
  145. success: function(data, statusText){
  146. layer.close(window.loading);
  147. if(data.status == 1){
  148. $('#version-identifier').val(data.version);
  149. responseObj.html(data.infoHtml);
  150. var parentContainer = responseObj.parent().parent(),
  151. nameContainer = parentContainer.find('.apk-name-container'),
  152. delObj = parentContainer.find('.del-it-apk-tool');
  153. nameContainer.html(data.apkName);
  154. nameContainer.attr('title', data.apkName);
  155. $('#apk-tool-file-tmp').html(data.fileInfo);
  156. $(submitId).removeAttr('disabled');
  157. }else{
  158. layer.alert(data.info, {title: alertTitle});
  159. }
  160. },
  161. error: function(data){
  162. layer.close(window.loading);
  163. layer.alert('未知错误,请稍后再试!');
  164. }
  165. });
  166. return false;//防止dialog 自动关闭
  167. });
  168. $('.apk-tool-upload-button').on('click', function(){
  169. $('#apk-tool-real-file').trigger('click');
  170. });
  171. });
  172. </script>

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

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

文件上传小技巧/原生态【html篇】的更多相关文章

  1. 文件上传小技巧/后端处理【以php示例】

    引语:在上一篇文章中说到,在页面中可以用隐藏的方式让你的上传页面看起来漂亮.但是这对于性能来说,并没有什么卵用,那么在后台的处理中,难道就没有一些处理技巧么?所谓后台的技巧,应该要包括上传得快一点,上 ...

  2. .Net文件上传--小数据--un

    文件上传控件:FileUpload - 控件,界面+方法+属性Button/LinkButton/ImageButton FileUpload控件:1.SaveAs("要上传到服务器的绝对路 ...

  3. ( 译、持续更新 ) JavaScript 上分小技巧(四)

    后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...

  4. ( 译、持续更新 ) JavaScript 上分小技巧(三)

    最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...

  5. 使用.NET框架、Web service实现Android的文件上传(二)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYUAAAKpCAIAAADcx6fPAAAgAElEQVR4nOydd1hT5+LHg1attbfr1t ...

  6. PHP实现视频文件上传完整实例

    这篇文章主要介绍了PHP实现视频文件上传的技巧,包含了PHP配置信息的设计及大文件的处理,需要的朋友可以参考下    本文以一个完整实例的形式实现了视频文件上传的功能.虽然是比较基础的应用,仍有一定的 ...

  7. 深入springMVC源码------文件上传源码解析(下篇)

    在上篇<深入springMVC------文件上传源码解析(上篇) >中,介绍了springmvc文件上传相关.那么本篇呢,将进一步介绍springmvc 上传文件的效率问题. 相信大部分 ...

  8. webAPI文件上传时文件过大404错误的问题

    背景:最近公司有个需求,外网希望自动保存数据到内网,内网有2台服务器可以相互访问,其中一台服务器外网可以访问,于是想在 这台服务器上放个中转的接口.后来做出来以后测试发现没有问题就放线上去了,不顾发现 ...

  9. WEB安全第二篇--用文件搞定服务器:任意文件上传、文件包含与任意目录文件遍历

    零.前言 最近做专心web安全有一段时间了,但是目测后面的活会有些复杂,涉及到更多的中间件.底层安全.漏洞研究与安全建设等越来越复杂的东东,所以在这里想写一个系列关于web安全基础以及一些讨巧的pay ...

随机推荐

  1. css样式表 格式与布局

    1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器  以.开头 ID选择器 以#开 ...

  2. [算法]树上倍增求LCA

    LCA指的是最近公共祖先(Least Common Ancestors),如下图所示: 4和5的LCA就是2 那怎么求呢?最粗暴的方法就是先dfs一次,处理出每个点的深度 然后把深度更深的那一个点(4 ...

  3. 浅析Java内存模型

    概述 Java内存模型的主要目标是定义程序中各个变量的访问规则,即在虚拟机中将变量存储到内存和从内存中取出变量这样的底层细节.此处的变量是线程共享的,存在竞争问题的. Java内存模型规定了所有的变量 ...

  4. ASP.NET 创建网站地图

    很多个人站长会使用工具来生成自己网站的站点地图,这样做的缺点在于网站的 sitemap 不能及时的得到更新.当我们发表了一篇新文章时,应该对网站的地图进行更新,并通知搜索引擎网站地图已经发生了改变! ...

  5. Unity(二)生命周期LifetimeManager

    描述:Unity的生命周期是注册的类型对象的生命周期,而Unity默认情况下会自动帮我们维护好这些对象的生命周期,我们也可以显示配置对象的生命周期,Unity将按照配置自动管理. //创建一个Unit ...

  6. document.referrer 特性

    最近需要用到document.referrer,但是在测试的时候,总是获取为空,百思不得其解. 于是发动百度,看了大量的文章没有一个说到点子上是为什么,后来偶然看到document.referrer ...

  7. python工具的安装

    下载: python安装包:python-2.7.3.msi pywin32-218.win32-py2.7.exe setuptools安装包:setuptools-0.6c11.win32-py2 ...

  8. Spring学习笔记 Part.01

    Hibernate的作用: 1.可以解决以面向对象的方式操作数据库的问题 请求参数(String)→Strut2→Action(对象)→业务逻辑组件(面向对象) 2.所以任何一个ORM框架都可以代替H ...

  9. CoreLocation框架的使用---定位,求两地距离

    前言: 在iOS开发中,有关导航,周边的开发,必须基于2个框架: Map Kit :用于地图展示 Core Location :用于地理定位   用户隐私的保护 从iOS 6开始,苹果在保护用户隐私方 ...

  10. CSS中父元素高度没有随子元素高度的改变而改变,应该如何解决?

    如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...