0

我正在使用 kartik-v-bootstrap-fileinput 来设置文件输入的样式。

但是我被困在多文件上传功能中。我如何上传多个文件？

我通读了他们的文档，除了将 uploadUrl 作为 AJAX 帖子之外没有明确的解释。

我用过 ：

 uploadUrl

在预览中，我可以看到有两个文件，这意味着在显示状态下，它被正确渲染了。当我提交表单并将其发布到服务器时，我尝试 dd（在 laravel 中死亡和 var_dump），它只显示了数组中的一个文件。

 <input id='image' name="IMAGE[]" multiple type="file" class="form-control file"  data-show-upload="false" accept="jpg|jpeg|pdf|png" data-allowed-file-extensions='["jpg", "jpeg","pdf", "png"]'>

下面的代码是完整的代码，来自以前的供应商：

var format="";
var fail = 0;
var arrayImg = [];
$("#image").fileinput({
uploadUrl : "http://local.kubikt.com/announcements/create",
maxFileCount: 10,
    theme: "fa",
maxFileSize: {{$maxfileupload}}
}).on('filebrowse', function(event) {
// arrayImg = [];
    format = "";
    fail = 0;
    console.log("File browse triggered.");
}).on('fileloaded', function(event, file, previewId, index, reader) {
    var fileExtension = file.name.split('.').pop().toLowerCase();
if(fileExtension == 'jpeg'){
  fileExtension = 'jpg'
}
// var fileExtension = array[1];
if(fail == 0 && format=="" && (fileExtension == 'jpg' || fileExtension == 'jpeg' || fileExtension == 'pdf' || fileExtension == 'png')){
  format=fileExtension;
  fail = 0;
}
else if( (fileExtension != 'jpg' && fileExtension != 'jpeg' && fileExtension != 'pdf' && fileExtension != 'png') || format!=fileExtension ){
  fail = 1;
}

//rotate image according to EXIF orientation 
var imgName = replaceAll(file.name,'-','_');
console.log('imgName : '+imgName);
var loadingImage = loadImage(
  file,
  function (img) {
      // console.log(file.name)
      img.toBlob(
          function (blob) {
              // Do something with the blob object,
              // e.g. creating a multipart form for file uploads:
              // var formData = new FormData();
              // formData.append('file', blob, fileName);
              /* ... */
              $('img[title="'+imgName+'"]').attr('src',URL.createObjectURL(blob))
              reader.result = URL.createObjectURL(blob)
              console.log(reader);
              console.log(URL.createObjectURL(blob))
              file = console.log(blob)

          },
          'image/jpeg'
      );
  },
  {
    maxWidth: 4096,
    orientation: true,
    canvas: true
  }
);

    console.log("Post select fail status: "+fail);
}).on('fileclear', function(event) {
    fail = 0;
    console.log("fileclear");
});

var size = 0;
$('#image').on('change',function(){
var files = $('#image').get(0).files;

size = 0;
for (i = 0; i < files.length; i++)
{
   size = size + files[i].size

   if(/^[a-zA-Z0-9-_., ]*$/.test(files[i].name) == false) {
      bootbox.alert('The filename cannot contain special characters.',function(){
        $(".btn.btn-default.fileinput-remove.fileinput-remove-button")[0].click();
      });
      return false;
  }
}

if((size/1024) > {{$maxpostsize}}){
  bootbox.alert('The maximum total file size for upload is {{$maxpostsize/1024}}MB!',function(){
    $(".btn.btn-default.fileinput-remove.fileinput-remove-button")[0].click();
  });
}
})

任何关于我在哪里做错以及我应该在哪里修复的帮助或提示将不胜感激。

谢谢

4

0 回答 0