当前位置：Gxlcms > AJAX > 基于ajax html实现文件上传技巧总结

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

时间：2021-07-01 10:21:17 帮助过：46人阅读

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

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

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

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！