Zusammenfassung der Fähigkeiten zum Hochladen von Dateien basierend auf Ajax-HTML

Dieser Artikel fasst hauptsächlich die auf Ajax-HTML basierenden Datei-Upload-Techniken im Detail zusammen. Interessierte Freunde können darauf verweisen.

Zitat: Wie wir alle wissen, ist zum Hochladen von Dateien nur eine erforderlich Eingabe, Typ=Datei und fertig. Allerdings ist der Stil dieses Labels wirklich nicht der Rede wert. Es ist wahrscheinlich schwierig, seinen Stil zu ändern. Aber eigentlich ist es ganz einfach. Lassen Sie uns heute über einige Tipps zum Hochladen von Dateien sprechen!

1. Wie kann ich den Stil anpassen?
1) Definieren Sie es einfach entsprechend dem Stil, den Sie sehen möchten, z. B. abc3a7c0b41fd564e3345b8481f574fb5db79b134e9f6b82c0b36e0489ee08ed Der Hintergrundbildeffekt kann eine Textanweisung sein, Sie können ihn nach Ihren Wünschen ändern! Mit der Schaltfläche wird außerdem ein Dateinamenscontainer benötigt, um den Namen bei der Auswahl der hochzuladenden Datei zu speichern, damit der Upload nicht langweilig und unverständlich aussieht.

2), fügen Sie die Dateisteuerung hinzu, die wirklich hochgeladen werden muss, und legen Sie das Attribut display:none wie 4d2ffc44994b3a0ff1e24e31262c1a07 fest, damit dort ist ein echter Ort für hochgeladene Dateien. Man kann also sagen, dass es von Ihrer Vorstellungskraft abhängt, wie schön die Schnittstelle zum Hochladen von Dateien ist!

2. Wie löst man ein Ereignis aus?

Dies ist ein wichtiger Punkt. Der auslösende Punkt sollte der von Ihnen geschriebene Stil sein, aber das Element, das wirklich funktioniert, ist verborgen, hat aber keinen Einfluss auf den Klickeffekt. Sie müssen nur einen Just auslösen Klicken Sie auf das Ereignis, z. B. $('#target-file').trigger('click');

3. Mehrere Dateien auswählen?

Um mehrere Dateien hochzuladen, verwenden Sie einfach multiple=true einer Datei in HTML. Natürlich können Sie auch ein Upload-Steuerelement eines Drittanbieters auswählen, z. B. swfupload Für diejenigen, die das nicht möchten. Wenn Sie das Plug-In verwenden, funktioniert es nicht.                                                                                                

Schnittstellenverschönerung kann tatsächlich Plug-Ins wie jqueryui verwenden. Wenn Sie einige benutzerfreundliche Interaktionen durchführen möchten, wird Ajax-Technologie verwendet, kein Aktualisierungswechsel, asynchrones Hochladen, Senden und schließlich Tatsächlich kann der Pfad von Ajax auch beibehalten werden. Verwenden Sie pushState und replaceState, um pjax zu implementieren.

Formularüberprüfung: validform.js

Asynchrone Dateiübermittlung: jquery.form.js
Freundliches Popup Eingabeaufforderung: layer.js


5. Irgendwelche Kompatibilitätsprobleme?

Das am meisten gefürchtete und wichtigste Problem bei der Arbeit an der Benutzeroberfläche ist das Kompatibilitätsproblem zwischen verschiedenen Browsern. Die folgenden Hauptpunkte dienen als Referenz:

Tabelle Die Breite wird inkonsistent behandelt

Auswahl, Eingabeanzeigehöhen sind inkonsistent;

Benachrichtigungs-Popups sind inkonsistent

...

6. Democode

<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>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ein einfaches Beispiel für die Verwendung von XPath in dom4j

Eine kurze Diskussion über Bootstraps DatePicker-Datumsbereichsauswahl

Ein einfaches Beispiel für die Verwendung von AJAX zur Implementierung der Seitenanmeldung und der Überprüfung registrierter Benutzernamen

Das obige ist der detaillierte Inhalt vonZusammenfassung der Fähigkeiten zum Hochladen von Dateien basierend auf Ajax-HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!