Question

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

但是我坚持多文件上传功能..如何上传多个文件？

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

我用过：

 uploadUrl

在预览中，我可以看到有两个文件，这意味着在显示状态下，它被正确渲染。当我提交表格并将其发布到服务器时，我试着 dd（laravel中的die和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();
  });
}
})

对我的任何帮助或提示，我在哪里做错了，我应该在哪里解决..

谢谢

Bootstrap文件输入插件多次上传

0 个答案: