Zusammenfassung der Fähigkeiten zum Hochladen von Dateien basierend auf Ajax-HTML-js-Tutorial-php.cn

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

亚连

Freigeben： 2018-05-23 14:26:09

Original

1325 Leute haben es durchsucht

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

Nach dem Login kopieren

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!