基於ajax html實現檔案上傳技巧總結_AJAX相關

引語：大家都知道，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, 讓你的網頁更自由！

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。