Zusammenfassung der Techniken zum Implementieren des Datei-Uploads in Ajax-HTML

Dieser Artikel fasst hauptsächlich die auf Ajax HTML basierenden Datei-Upload-Techniken ausführlich zusammen. Er hat einen gewissen Referenzwert für das Erlernen von Ajax und meine Erfahrungen mit Ajax Interessierte Freunde können sich auf

beziehen. Zitat: Wie wir alle wissen, erfordert das Hochladen von Dateien in HTML nur eine Eingabe, Typ=Datei. 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 Stil sein, den Sie schreiben, aber das Element, das wirklich funktioniert, ist verborgen, hat aber keinen Einfluss auf den Klickeffekt Geben Sie einfach ein Klickereignis aus, z. B. $('#target-file').trigger('click');

3. Mehrfachauswahl von Dateien?

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 gut. Aber für Leute, die das Plug-in nicht nutzen wollen, wird es nicht funktionieren.                                                                                         

Sie können tatsächlich Plug-Ins wie jqueryui verwenden, um die Benutzeroberfläche zu verschönern. Wenn Sie benutzerfreundliche Interaktionen durchführen möchten, verwenden Sie Ajax-Technologie und aktualisierungsfreies Umschalten. Asynchrones Hochladen, Senden und schließlich kann der Ajax-Pfad auch beibehalten werden. Verwenden Sie pushState und replaceState, um pjax zu implementieren.
Formularüberprüfung: validform.js

Asynchrone Dateiübermittlung: jquery.form.js

Freundliche Popup-Eingabeaufforderung: layer.js



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. Im Folgenden sind die wichtigsten Referenzpunkte aufgeführt:

Die Tabelle Breite wird inkonsistent gehandhabt;

Auswahl- und Eingabeanzeigehöhen sind inkonsistent;

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

Das Obige befasst sich hauptsächlich mit der Verwendung des versteckten Eingabedatei-Tags zur Auswahl, der Ajax-Übermittlung unmittelbar nach der Auswahl der Datei und schließlich dem gesamten Formular-Ajax-Übermittlungsprozess. Verwenden Sie sinnvollerweise CSS und JS, um Ihre Webseite freier zu gestalten!

Verwandte Empfehlungen:

HTML5-basierter vorschaufähiger Ajax-Upload mehrerer Bilder

PHP-ähnlich Ein einfaches Beispiel für das Hochladen von Bildern mit AJAx

Ajax-Upload-Parameter werden beim Hochladen nicht aktualisiert und andere damit zusammenhängende Probleme

Das obige ist der detaillierte Inhalt vonZusammenfassung der Techniken zum Implementieren des Datei-Uploads in Ajax-HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!