基于ajax的html如何實現(xiàn)文件上傳

這篇文章主要介紹基于ajax的html如何實現(xiàn)文件上傳，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1. 怎樣自定義樣式？
1）、只管按照自己喜歡看到的樣式去定義即可，如<a href='javascript:;' class='upload-button'></a>,可以是背景圖片效果，可以是文字指示，總之想怎么改怎么改！有了按鈕，還需要一個文件名容器，用來存放選擇上傳文件時的名字，從而不讓上傳看起來枯澀難懂。

2）、添加真正需要上傳的文件控件，并設置屬性display:none;如 <input type='file' class='hide' />, 這樣就有了真正的上傳文件的地方了。所以，可以說，上傳文件的界面有多漂亮取決你的想象力！

2. 怎樣觸發(fā)事件？

這是個重點，觸發(fā)的點應該是自己寫的樣式處，而真正起作用的元素卻是隱藏的，但是并不影響它的點擊效果，只需要給它觸發(fā)一個點擊事件即可，如$('#target-file').trigger('click');

3. 多選文件？

多文件上傳，只需使用html的一個file的multiple=true即可，當然你也可以選擇第三方的上傳控件，如swfupload，效果是真心不錯的，但是對于不想用的插件的人，就不起作用了。                                                                         

4.  相關(guān)插件？ 

界面美化其實可以使用jqueryui等插件；
要做一些友好的交互的話，都會用到ajax技術(shù)，無刷新切換、異步上傳、提交，最后，其實ajax的路徑也是可以保留的，使用pushState, replaceState 實現(xiàn) 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 = '系統(tǒng)提示：';
  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('還有子渠道包數(shù)據(jù)，不能完成切換，請先確認清除再切換！');
     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 自動關(guān)閉
  });
  //打包工具
  $('#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 自動關(guān)閉
  });
  $('.apk-tool-upload-button').on('click', function(){
   $('#apk-tool-real-file').trigger('click');
  });
 });
</script>

主要就是，使用隱藏的input file標簽選擇，選擇文件之后立即ajax提交，最后，整個表單ajax提交的過程?！　?br/>

以上是“基于ajax的html如何實現(xiàn)文件上傳”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！