ajax html 기반 파일 업로드 기술 총화

인용문:html 에 파일 을 올 리 면 input 이 고 type=file 이면 됩 니 다.그러나 이 라벨 의 스타일 은 정말 언급 할 가치 가 없다.그의 스타일 을 바 꾸 는 것 도 어 려 울 것 이다.하지만 사실은 간단 합 니 다.오늘 은 파일 업로드 팁 을 말씀 드 리 겠 습 니 다!
1.스타일 을 어떻게 정의 하나 요?
1)、원 하 는 스타일 로 만 정의 하면 됩 니 다.예 를 들 어,배경 그림 효과 일 수도 있 고 문자 지시 일 수도 있 습 니 다.어쨌든 어떻게 고치 고 싶 은 지!버튼 이 있 으 면 파일 을 업로드 할 때의 이름 을 저장 하고 업로드 가 지루 해 보이 지 않도록 파일 이름 용기 가 필요 합 니 다.
2)업로드 할 파일 컨트롤 을 추가 하고 속성 display:none 을 설정 합 니 다.예 를 들 어와 같이 파일 을 올 리 는 곳 이 생 겼 습 니 다.그래서 파일 을 올 리 는 화면 이 얼마나 예 쁜 지 는 상상력 에 달 려 있다 고 할 수 있 습 니 다!
2.사건 을 어떻게 촉발 합 니까?
이것 은 중점 입 니 다.터치 하 는 점 은 자신 이 쓴 스타일 이 어야 합 니 다.진정 으로 작용 하 는 요 소 는 숨겨 져 있 지만 클릭 효과 에 영향 을 주지 않 습 니 다.클릭 이벤트 만 터치 하면 됩 니 다.예 를 들 어$('#target-file').trigger('click');
3.파일 을 더 선택 하 시 겠 습 니까?
다 중 파일 업로드,html 의 한 file 의 multiple=true 만 사용 하면 됩 니 다.물론 제3자 업로드 컨트롤 도 선택 할 수 있 습 니 다.예 를 들 어 swfupload 는 효과 가 정말 좋 지만 사용 하고 싶 지 않 은 플러그 인 에 게 는 도움 이 되 지 않 습 니 다.                                                                         
4.  관련 플러그 인? 
인터페이스 미 화 는 jquery ui 등 플러그 인 을 사용 할 수 있 습 니 다.
우호 적 인 상호작용 을 하려 면 ajax 기술 을 사용 합 니 다.새로 고침 전환,비동기 업로드,제출 이 없습니다.마지막 으로 ajax 의 경로 도 보류 할 수 있 습 니 다.push State,replace State 를 사용 하여 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 를 합 리 적 으로 사용 하여 웹 페이지 를 더욱 자 유 롭 게 합 니 다!
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기