Quelles sont les étapes pour implémenter facilement le téléchargement de fichiers avec ajax+html ?

Cette fois, je vais vous expliquer quelles sont les étapes pour mettre en œuvre facilement le téléchargement de fichiers avec ajax+html, et quelles sont les précautions pour mettre facilement en œuvre le téléchargement de fichiers avec ajax+html. Ce qui suit est un cas pratique.

Citation : Comme nous le savons tous, le téléchargement de fichiers au format HTML ne nécessite qu'une seule entrée, type=file. Cependant, le style de cette étiquette ne vaut vraiment pas la peine d'être mentionné. Il est probablement difficile de changer de style. Mais c’est en fait assez simple. Parlons aujourd’hui de quelques conseils pour télécharger des fichiers !

1. Comment personnaliser le style ?
1) Définissez-le simplement en fonction du style que vous aimez voir, par exemple < a>, cela peut être un effet d'image de fond, cela peut être une instruction textuelle, bref, vous pouvez le modifier comme vous le souhaitez ! Avec le bouton, un conteneur de nom de fichier est également nécessaire pour stocker le nom lors de la sélection du fichier à télécharger, afin d'éviter que le téléchargement ne paraisse ennuyeux et difficile à comprendre.

2), ajoutez le contrôle de fichier qui doit vraiment être téléchargé et définissez l'attribut display:none tel que , de sorte qu'il est un véritable emplacement de fichiers téléchargés. On peut donc dire que la beauté de l'interface de téléchargement de fichiers dépend de votre imagination !

2. Comment déclencher un événement ?

C'est un point important. Le point de déclenchement doit être le style que vous avez écrit, mais l'élément qui fonctionne vraiment est masqué, mais cela n'affecte pas son effet de clic. Il vous suffit de déclencher un Just. cliquez sur l'événement, tel que $('#target-file').trigger('click');

3. Sélectionner plusieurs fichiers ?

Pour télécharger plusieurs fichiers, utilisez simplement multiple=true d'un fichier en HTML. Bien sûr, vous pouvez également choisir un contrôle de téléchargement tiers, tel que swfupload. L'effet est vraiment bon, mais. pour ceux qui ne veulent pas Si vous utilisez le plug-in, cela ne fonctionnera pas.                                                                                                       

Embellissement de l'interface

En fait, vous pouvez utiliser des plug-ins tels que jqueryui

Si vous souhaitez faire des interactions conviviales, vous utiliserez la technologie ajax, pas de rafraîchissement ; commutation, téléchargement asynchrone, soumission, Enfin, en fait, le chemin d'ajax peut également être conservé. Utilisez pushState et replaceState pour implémenter pjax.Vérification du formulaire
: validform.js
Soumission asynchrone de. fichiers : jquery.form.jsInvite contextuelle conviviale : layer.js

5.

La chose la plus redoutée et la plus importante lors du travail d'interface est le problème de compatibilité entre les différents navigateurs. Voici les principaux points de référence :

tableau La largeur est gérée de manière incohérente sélectionnez, les hauteurs d'affichage des entrées sont incohérentes ;

les fenêtres contextuelles d'alerte sont incohérentes

...

Code de démonstration

Ce qui précède concerne principalement l'utilisation de la balise de fichier d'entrée cachée pour sélectionner, la soumission ajax immédiatement après la sélection du fichier, et enfin, le processus de soumission ajax de l'intégralité du formulaire. ​

Utilisez raisonnablement du CSS et du JS pour rendre votre page Web plus gratuite !

<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=&#39;true&#39; />
<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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de la façon dont Ajax() interagit avec l'arrière-plan

Explication détaillée de la façon de gérer Problèmes inter-domaines WebService

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!