考试首页 | 考试用书 | 培训课程 | 模拟考场 | 考试论坛  
  当前位置:编程开发 > AJAX > 文章内容
  

AJAX教程:基于ajaxhtml实现文件上传技巧总结

 [ 2017年9月5日 ] 【

  引语:大家都知道,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. 演示代码

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<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>
首页 1 2 尾页
本文纠错】【告诉好友】【打印此文】【返回顶部
将考试网添加到收藏夹 | 每次上网自动访问考试网 | 复制本页地址,传给QQ/MSN上的好友 | 申请链接 | 意见留言 TOP
关于本站  网站声明  广告服务  联系方式  站内导航  考试论坛
Copyright © 2007-2013 中华考试网(Examw.com) All Rights Reserved