侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

基于ajax html实现文件上传技巧总结

前端  /  管理员 发布于 5年前   219

引语:大家都知道,html中上传文件就一个input,type=file就搞定了。但是,这个标签的样式,实在不值得提点什么,要改动他的样式,恐怕也是较难的。但是其实挺简单,今天就来说说上传文件小技巧吧!

1. 怎样自定义样式?
1)、只管按照自己喜欢看到的样式去定义即可,如<a href='' 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. 演示代码

<a href="" up-type-id="1" class="btn btn-default small-btn switch-upload-method"><span>本地上传</span></a><a href="" 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, 让你的网页更自由!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


  • 上一条:
    经典的20道AJAX面试题(必知必会)
    下一条:
    AJAX实现图片预览与上传及生成缩略图的方法
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客