Was sind die Schritte, um das Hochladen von Dateien mit Ajax+HTML einfach zu implementieren?

Dieses Mal erläutere ich Ihnen die Schritte zum einfachen Implementieren des Datei-Uploads mit Ajax+HTML und die Vorsichtsmaßnahmen zum einfachen Implementieren des Datei-Uploads mit Ajax+HTML. Das Folgende ist ein praktischer Fall.

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. , es kann ein Hintergrundbildeffekt sein, es kann eine Textanweisung sein, kurz gesagt, Sie können es ändern, wie Sie möchten! 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. Der Effekt ist wirklich gut Für diejenigen, die das nicht möchten. Wenn Sie das Plug-In verwenden, funktioniert es nicht.                                                                                                

Schnittstellenverschönerung

Tatsächlich können Sie Plug-Ins wie jqueryui verwenden;

Wenn Sie benutzerfreundliche Interaktionen durchführen möchten, verwenden Sie Ajax-Technologie, keine Aktualisierung Umschalten, asynchroner Upload, Übermittlung. Schließlich kann der Pfad von Ajax auch beibehalten werden. Verwenden Sie pushState und replaceState, um pjax zu implementieren.Formularüberprüfung
: validform.js
Asynchrone Übermittlung von Dateien: jquery.form.jsFreundliche 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;

Warnungs-Popups sind inkonsistent

...

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

Das Obige dient hauptsächlich der Auswahl versteckter Eingabedatei-Tags, 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! Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung, wie Ajax() mit dem Hintergrund interagiert

Detaillierte Erklärung der Handhabung WebService-übergreifende domänenübergreifende Probleme

Das obige ist der detaillierte Inhalt vonWas sind die Schritte, um das Hochladen von Dateien mit Ajax+HTML einfach zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!