如何基于ajax html实现文件上传?

如何基于ajax html实现文件上传?

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

<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, 让你的网页更自由!

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