Résumé des techniques d'implémentation du téléchargement de fichiers en ajax html

Cet article résume principalement en détail les techniques de téléchargement de fichiers basées sur ajax html Il a une certaine valeur de référence pour l'apprentissage de ajax et mon expérience sur ajax Les amis intéressés peuvent se référer à

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, tel que , cela peut être L'effet d'image de fond 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 déclencheur doit être le style que vous écrivez, mais l'élément qui fonctionne vraiment est caché, mais cela n'affecte pas son effet de clic. give Cela déclenche simplement un événement de clic, tel que $('#target-file').trigger('click');

3.

Pour télécharger plusieurs fichiers, utilisez simplement multiple=true d'un fichier HTML. Bien sûr, vous pouvez également choisir un contrôle de téléchargement tiers, tel que swfupload. bien. Mais pour les personnes qui ne veulent pas utiliser le plug-in, cela ne fonctionnera pas.                                                                                               

Vous pouvez réellement utiliser des plug-ins tels que jqueryui pour embellir l'interface Si vous souhaitez effectuer des interactions amicales, vous utiliserez la technologie ajax, la commutation sans rafraîchissement, téléchargement asynchrone, soumission et enfin, en fait, le chemin ajax peut également être conservé. Utilisez pushState et replaceState pour implémenter pjax.Vérification du formulaire : validform.js
Soumission de fichier asynchrone : jquery.form.js

Invite contextuelle conviviale : layer.js

5. Des problèmes de compatibilité ?

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 :
Le tableau. la largeur est gérée de manière incohérente ;

les hauteurs d'affichage de sélection et d'entrée sont incohérentes ;

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

...

6. Code démo

<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 = &#39;系统提示：&#39;;
  var submitId = &#39;#do-submit&#39;;
  $(&#39;#taskForm&#39;).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){
    $(&#39;.upload-file-real&#39;).attr(&#39;disabled&#39;, &#39;disabled&#39;);
    $(submitId).attr(&#39;disabled&#39;, &#39;disabled&#39;); //提交前禁用按钮
    ajaxSubmitForm(curform);
    $(submitId).removeAttr(&#39;disabled&#39;);   //失败后恢复可提交
    return false;
   },
   submitForm: function(){}      //不再起作用
  });

  //切换上传方法
  $(&#39;.switch-upload-method&#39;).off().on(&#39;click&#39;, function(){
//   $(submitId).attr(&#39;disabled&#39;, &#39;disabled&#39;);
   var pObj = $(this).parent().find(&#39;.switch-upload-method&#39;);
   var index = pObj.index(this);
   var uploadTypeId = $(&#39;#upload-type-id&#39;).val();      //上传方式：1:打包工具;2:本地上传,0:没有上传方式
   var uploadType = $(this).attr(&#39;up-type-id&#39;);
   if(parseInt($(&#39;#sub-channel-count&#39;).html()) > 0){
    if(uploadTypeId != uploadType){
     layer.alert(&#39;还有子渠道包数据，不能完成切换，请先确认清除再切换！&#39;);
     return false;
    }
   }
   pObj.not(&#39;:eq(&#39; + index + &#39;)&#39;).removeClass(&#39;btn-danger&#39;).addClass(&#39;btn-default&#39;);
   pObj.eq(index).removeClass(&#39;btn-default&#39;).addClass(&#39;btn-danger&#39;);
   if(uploadType == 36){    //local-upload
    $(&#39;#upload-type-id&#39;).val(uploadType);
    $(&#39;#init-apk-container&#39;).show();
    $(&#39;#apk-tool-container&#39;).hide();
    $(&#39;#upload-main-control&#39;).find(&#39;.del-it-main&#39;).css({display: &#39;inline-block&#39;});
    $(&#39;#local-upload-real-file&#39;).trigger(&#39;click&#39;);
   }else if(uploadType == 35){   //apk-tool
    $(&#39;#upload-type-id&#39;).val(uploadType);
    $(&#39;#init-apk-container&#39;).hide();
    $(&#39;#local-upload-container&#39;).hide();
    $(&#39;#upload-main-control&#39;).find(&#39;.del-it-main&#39;).hide();
    $(&#39;#apk-tool-container&#39;).show();
   }
  });
  //本地上传
  $(&#39;#local-upload-real-file&#39;).off().on(&#39;change&#39;, 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(&#39;response-id&#39;);
   var responseObj = $(&#39;#&#39; + responseObjId);
   $(&#39;#taskForm&#39;).ajaxSubmit({
    url:&#39;/aa/bb/uploadTmpApk&#39;,
    resetForm: false,
    dataType: &#39;json&#39;,
    beforeSubmit: function(option){
     window.loading = layer.load(2);
    },
    success: function(data, statusText){
     layer.close(window.loading);
     if(data.status == 1){
      $(&#39;#version-identifier&#39;).val(data.version);
      responseObj.html(data.apkInfoHtml);
      responseObj.show();
      var delObj = $(&#39;#upload-main-control&#39;).find(&#39;.del-it-main&#39;);
      delObj.css({&#39;display&#39;: &#39;inline-block&#39;});
      $(&#39;#sub-channel-count&#39;).html(data.apkTotal);
      $(&#39;#init-apk-container&#39;).hide();
      $(submitId).removeAttr(&#39;disabled&#39;);
     }else{
      layer.alert(data.info, {title: alertTitle});
     }
    },
    error: function(data){
     layer.close(window.loading);
     layer.alert(&#39;未知错误，请稍后再试！&#39;);
    }
   });
   return false;//防止dialog 自动关闭
  });
  //打包工具
  $(&#39;#apk-tool-real-file&#39;).off().on(&#39;change&#39;, function(){
   if(!$(this).val()){
    return false;
   }
   var responseObjId = $(this).attr(&#39;response-id&#39;);
   var responseObj = $(&#39;#&#39; + responseObjId);
   $(&#39;#Form&#39;).ajaxSubmit({
    url:&#39;/aa/bb/uploadTmpApkTool&#39;,
    resetForm: false,
    dataType: &#39;json&#39;,
    beforeSubmit: function(option){
     window.loading = layer.load(2);
    },
    success: function(data, statusText){
     layer.close(window.loading);
     if(data.status == 1){
      $(&#39;#version-identifier&#39;).val(data.version);
      responseObj.html(data.infoHtml);
      var parentContainer = responseObj.parent().parent(),
       nameContainer = parentContainer.find(&#39;.apk-name-container&#39;),
        delObj = parentContainer.find(&#39;.del-it-apk-tool&#39;);
      nameContainer.html(data.apkName);
      nameContainer.attr(&#39;title&#39;, data.apkName);
      $(&#39;#apk-tool-file-tmp&#39;).html(data.fileInfo);
      $(submitId).removeAttr(&#39;disabled&#39;);
     }else{
      layer.alert(data.info, {title: alertTitle});
     }
    },
    error: function(data){
     layer.close(window.loading);
     layer.alert(&#39;未知错误，请稍后再试！&#39;);
    }
   });
   return false;//防止dialog 自动关闭
  });
  $(&#39;.apk-tool-upload-button&#39;).on(&#39;click&#39;, function(){
   $(&#39;#apk-tool-real-file&#39;).trigger(&#39;click&#39;);
  });
 });
</script>

Ce qui précède concerne principalement l'utilisation de la balise cachée du fichier d'entrée pour sélectionner, la soumission ajax immédiatement après la sélection du fichier, et enfin, l'ensemble du processus de soumission ajax du formulaire. Utilisez raisonnablement du CSS et du JS pour rendre votre page Web plus gratuite !

Recommandations associées :

Téléchargement Ajax multi-images prévisualisable basé sur HTML5

PHP similaire Un exemple simple d'images de téléchargement AJAx

Les paramètres de téléchargement Ajax ne sont pas mis à jour lors du téléchargement et d'autres problèmes connexes

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!