Beispielcode für die Implementierung mehrerer Datei-Uploads im Formular mithilfe von js

Dieser Artikel stellt hauptsächlich JavaScript vor, wie man mehrere Datei-Uploads von Formularformularen implementiert. Interessierte Freunde können darauf verweisen

Mehrere Datei-Uploads des Formularformulars, der spezifische Inhalt ist wie folgt

Das formData-Objekt kann eine Reihe von Schlüssel-Wert-Paaren verwenden, um ein vollständiges Formular zu simulieren, und dann Ajax zum Senden verwenden Formular

Verwenden Sie das Formular ff9c23ada1bcecdd1a0fb5d5a0f18437, um das FormData-Objekt zum Hochladen von Dateien zu initialisieren

<!--文件上传-->
 <form id="uploadForm" enctype="multipart/form-data">
 <p class="row" style="margin-top: 20px;">
  <p class="form-group col-md-12" id="file">   
   <input type="hidden" name="_csrf-application"
     value="<?= $csrf ?>">
   <p class="form-group field-uploadform-excelfiles" style="margin-left: 30px;">
    <label class="control-label btn btn-primary"
      for="uploadform-excelfiles">选择文件</label>
    <input type="file" id="uploadform-excelfiles" name="UploadForm[excelFiles][]"
      multiple class="attachment-upload" accept=".xlsx">
    <input type="button" id="fileUpload" value="上传文件" class="btn btn-success" style="margin-left: 15px;">
    <p class="help-block"></p>
    <p id="fileName"></p>
   </p>

  </p>
 </p>
 <table role="presentation" class="table"><tbody id="files"></tbody></table> 
</form>

Hinweis:

1. Wenn Sie das formData-Objekt zum Hochladen des Formulars verwenden, müssen Sie dem Formular das Attribut „enctype="multipart/form-data" hinzufügen
2 Wenn Sie das Formular hochladen, müssen Sie mit dem Ausfüllen des Werts beginnen. Sie können die Aktion nicht zum Hochladen verwenden. Dies führt zu Fehlern in den hochgeladenen Daten

Datei durch das Änderungsereignis ändern lassen

 var fileList;
 var allFile = [];
 //FormData对象初始化
 var form = document.getElementById("upload-form");
 var formData = new FormData(form);
 $("#uploadform-excelfiles").on('change', function (e) {
  //获取表单数据并传入formData中
  var norm = $("#norm").val();
  var major = $("#major").val();
  var type = $("#type").val();
  formData.set("norm",norm);
  formData.set("major",major);
  formData.set("type",type);

  var fileError = 0;
  fileList = e.currentTarget.files;
  $.each(fileList, function (index, item) {
   var fileName = item.name;
   var fileEnd = fileName.substring(fileName.indexOf("."));
   //上传文件格式判断
   if (fileEnd == ".xlsx") {
    allFile.push(item);
    $(&#39;#files&#39;).append( &#39;<tr style="padding-top: 7px;">&#39; +
         &#39;<td>&#39;+fileName+&#39;</td>&#39; +
         &#39;<td>&#39;+(item.size / 1024).toFixed(2)+&#39;K</td>&#39; +
         &#39;<td><input type="button" class="btn btn-danger delete" value="删除"></td>&#39; +
         &#39;</tr>&#39;);
    //追加文件
    formData.append(&#39;UploadForm[excelFiles][]&#39;,item);
   } else {
    fileError++;
   }
  });
  if (fileError > 0) {
   alert("只能上传 “.xlsx” 格式的文件!");
   document.getElementById("upload-form").reset();
   return;
  }

  var fileCount = $(&#39;#files&#39;).find(&#39;tr&#39;).length;
  $(&#39;#fileName&#39;).html(&#39;共上传 &#39; + fileCount + &#39; 个文件&#39;);

 });

LöschenSchaltflächeEreignis

$('#files').on('click','.delete',function (e) {
  var saveFile = [];
  var norm = $("#norm").val();
  var major = $("#major").val();
  var type = $("#type").val();
  var deleteName = e.target.parentNode.previousElementSibling.previousElementSibling.textContent;
  var deleteIndex;
  //将不删除的放入数组中
  $.each(allFile,function (index, item) {
   if(item.name == deleteName){
     deleteIndex = index;
   }else {
    saveFile.push(item);
   }
  });
  allFile.splice(deleteIndex,1);
  //表单数据重置
  formData.set("norm",norm);
  formData.set("major",major);
  formData.set("type",type);
  formData.delete('UploadForm[excelFiles][]');
  //将不删除的数组追加的formData中
  $.each(saveFile,function (index, item) {
   formData.append('UploadForm[excelFiles][]',item);
  });

  e.target.parentNode.parentNode.remove();
  var fileCount = $('#files').find('tr').length;
  $('#fileName').html('共上传 ' + fileCount + ' 个文件');

 });

Datei-Upload-Ereignis

$("#fileUpload").on('click',function () {
  var len = formData.getAll('UploadForm[excelFiles][]').length;
  $("#overlay").show();
  if(len > 1){
    var deleteBtn = $(".delete");
    //通过ajax进行上传
    $.ajax({
     url: '/finalize/upload',
     type: 'POST',
     cache: false,
     data: formData,
     processData: false,
     contentType: false
    }).done(function(res) {
     if(res.code == 'ok'){
      //进度条设置
      var value = 0;
      var timer2 = setInterval(function () {
       value ++;
       $("#progress").css('width', value + "%");
       if (value == 120) {
        clearInterval(timer2);
        $("#overlay").hide();
        alert("文件上传成功!");
       }
      }, 50);
     //删除对应按钮
     $("#fileUpload").css("display","none");
     $.each(deleteBtn,function (index, item) {
      $(item).css("display","none");
     });
     $(&#39;#files&#39;).append(&#39;<tr><td><td><td><a type="button" class="btn btn-success pull-right" id="fileDown" href="/finalize/get-file?id=&#39; + res.data.id + &#39;" rel="external nofollow" >文件下载</a></td></tr>&#39;)
    }

   }).fail(function(res) {
    alert("文件上传失败:" + res.msg);
   });
  }else {
   alert("请选择需要上传的文件！");
  }

 });

[Verwandte Empfehlungen]

1 >Kostenloses JS-Online-Video-Tutorial

2.

JavaScript-Referenzhandbuch für Chinesisch

3.php.cn Dugu Jiujian (3) – JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonBeispielcode für die Implementierung mehrerer Datei-Uploads im Formular mithilfe von js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!