Php AJAX/Laravel多文件上传_Php_Jquery_Laravel_Upload

Php AJAX/Laravel多文件上传

php jquery laravel

Php AJAX/Laravel多文件上传,php,jquery,laravel,upload,Php,Jquery,Laravel,Upload,我正在尝试使用jQuery/AJAX/Laravel从拖放事件上载多个文件我的丢弃事件： $( document ).on('drop dragleave', '.file-drag', function(e){ $(this).removeClass('drop-ready'); if(e.originalEvent.dataTransfer.files.length) { e.preventDefault(); e.stopPropagation()

我正在尝试使用jQuery/AJAX/Laravel从拖放事件上载多个文件

我的丢弃事件：

$( document ).on('drop dragleave', '.file-drag', function(e){
    $(this).removeClass('drop-ready');
    if(e.originalEvent.dataTransfer.files.length) {
      e.preventDefault();
      e.stopPropagation();

      if (e.type === "drop") {
      var files = e.originalEvent.dataTransfer.files;
      AjaxFileUpload(files)
      }
    }
  });

function AjaxFileUpload(files){
    console.log(files);

    //Start appending the files to the FormData object.
    var formData = new FormData;
    formData.append('_token', CSRF_TOKEN);
    for(var i = 0; i < files.length; i++){
      formData.append(files[i].name, files[i])
    }

    console.log(formData.entries());

    $.ajax({
        //Server script/controller to process the upload
        url: 'upload',
        type: 'POST',

        // Form data
        data: formData,

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,
        // Error logging
        error: function(jqXHR, textStatus, errorThrown){
          console.log(JSON.stringify(jqXHR));
          console.log('AJAX Error: ' + textStatus + ": " + errorThrown);
        },
        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
        success: function(data){
          console.log(data);
        }
    });
  }

class UploadsController extends Controller
{
    public function UploadFiles(Request $request){
      return $request->all();
    }
}

var formElement = document.getElementById("addForm");
var formData = new FormData(formElement);
// Attach uploaded files to form submission
var files = myDZ.getAcceptedFiles();  // using Dropzone
for (var i = files.length - 1; i >= 0; i--) {
    formData.append('files[]', files[i]);
}

$.ajax({
    url: 'home/',
    data: formData,
    processData: false,
    contentType: false,
    timeout: 1000,
    type: 'POST',
    headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken,
    },
    success: function(){
       ...
    },
    error: function (jqXHR, textStatus) {
      ...
    }
});

foreach($request->only('files') as $files){
    foreach ($files as $file) {
        if(is_file($file)) {    // not sure this is needed
            $fname = $file->getClientOriginalName();
            $fpath = $file->store('docs'); // path to file
        }
    }
}

Dropzone.autoDiscover = false;

var myDZ = new Dropzone("#my-dropzone", {
    url: "/home/files",
    maxFilesize: 5,
    maxFiles: 5,
    addRemoveLinks: true,
    dictDefaultMessage: 'Drop files here or click to upload <br> (max: 5 files)',
    headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken
    },
});

我的上传脚本：

$( document ).on('drop dragleave', '.file-drag', function(e){
    $(this).removeClass('drop-ready');
    if(e.originalEvent.dataTransfer.files.length) {
      e.preventDefault();
      e.stopPropagation();

      if (e.type === "drop") {
      var files = e.originalEvent.dataTransfer.files;
      AjaxFileUpload(files)
      }
    }
  });

function AjaxFileUpload(files){
    console.log(files);

    //Start appending the files to the FormData object.
    var formData = new FormData;
    formData.append('_token', CSRF_TOKEN);
    for(var i = 0; i < files.length; i++){
      formData.append(files[i].name, files[i])
    }

    console.log(formData.entries());

    $.ajax({
        //Server script/controller to process the upload
        url: 'upload',
        type: 'POST',

        // Form data
        data: formData,

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,
        // Error logging
        error: function(jqXHR, textStatus, errorThrown){
          console.log(JSON.stringify(jqXHR));
          console.log('AJAX Error: ' + textStatus + ": " + errorThrown);
        },
        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
        success: function(data){
          console.log(data);
        }
    });
  }

class UploadsController extends Controller
{
    public function UploadFiles(Request $request){
      return $request->all();
    }
}

var formElement = document.getElementById("addForm");
var formData = new FormData(formElement);
// Attach uploaded files to form submission
var files = myDZ.getAcceptedFiles();  // using Dropzone
for (var i = files.length - 1; i >= 0; i--) {
    formData.append('files[]', files[i]);
}

$.ajax({
    url: 'home/',
    data: formData,
    processData: false,
    contentType: false,
    timeout: 1000,
    type: 'POST',
    headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken,
    },
    success: function(){
       ...
    },
    error: function (jqXHR, textStatus) {
      ...
    }
});

foreach($request->only('files') as $files){
    foreach ($files as $file) {
        if(is_file($file)) {    // not sure this is needed
            $fname = $file->getClientOriginalName();
            $fpath = $file->store('docs'); // path to file
        }
    }
}

Dropzone.autoDiscover = false;

var myDZ = new Dropzone("#my-dropzone", {
    url: "/home/files",
    maxFilesize: 5,
    maxFiles: 5,
    addRemoveLinks: true,
    dictDefaultMessage: 'Drop files here or click to upload <br> (max: 5 files)',
    headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken
    },
});

我认为我的映像正在到达服务器端，因为当我返回请求对象时，我在控制台中得到以下内容：

因此，CSRF令牌正在通过，图像（我想？）正在通过。我的问题是使用PHP访问文件并通过->store（）；；存储它们

在无数的在线/文档示例中，他们通常使用以下内容：

$path = $request->photo->store('images');

然而，我不理解这其中的“照片”方面。如果上传了视频或PDF怎么办？我基本上不理解如何访问请求对象的不同部分。Laravel网站上的文档对此非常稀少，只给出了一个使用“照片”的示例，但从未解释过。

关于Laravel文档中的示例，“照片”只是利用一种神奇的方法引用一个名为“照片”的上传文件。您可以用任何特定文件名替换“photo”。可以找到能够在上传的文件上调用的特定函数。

找到了它

在我的上载控制器中：

class UploadsController extends Controller
{
    public function UploadFiles(Request $request){
      $arr = [];
      foreach($request->all() as $file){
        if(is_file($file)){
          $string = str_random(16);
          $ext = $file->guessExtension();
          $file_name = $string . '.' .  $ext;
          $filepath = 'uploads/' . Auth::user()->username . '/' . $file_name;
          $file->storeAs(('uploads/' . Auth::user()->username), $file_name);
          array_push($arr, [$file_name, $filepath]);
        }

      }
      return $arr;
    }
}

这花了我一段时间，但我终于找到了一个有效的解决方案。我使用的是Dropzone，因此文件对象列表由getAcceptedFiles（）返回，但对您来说应该是相同的概念。我还将这些文件附加到现有的表单中

上传：

$( document ).on('drop dragleave', '.file-drag', function(e){
    $(this).removeClass('drop-ready');
    if(e.originalEvent.dataTransfer.files.length) {
      e.preventDefault();
      e.stopPropagation();

      if (e.type === "drop") {
      var files = e.originalEvent.dataTransfer.files;
      AjaxFileUpload(files)
      }
    }
  });

function AjaxFileUpload(files){
    console.log(files);

    //Start appending the files to the FormData object.
    var formData = new FormData;
    formData.append('_token', CSRF_TOKEN);
    for(var i = 0; i < files.length; i++){
      formData.append(files[i].name, files[i])
    }

    console.log(formData.entries());

    $.ajax({
        //Server script/controller to process the upload
        url: 'upload',
        type: 'POST',

        // Form data
        data: formData,

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,
        // Error logging
        error: function(jqXHR, textStatus, errorThrown){
          console.log(JSON.stringify(jqXHR));
          console.log('AJAX Error: ' + textStatus + ": " + errorThrown);
        },
        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
        success: function(data){
          console.log(data);
        }
    });
  }

class UploadsController extends Controller
{
    public function UploadFiles(Request $request){
      return $request->all();
    }
}

var formElement = document.getElementById("addForm");
var formData = new FormData(formElement);
// Attach uploaded files to form submission
var files = myDZ.getAcceptedFiles();  // using Dropzone
for (var i = files.length - 1; i >= 0; i--) {
    formData.append('files[]', files[i]);
}

$.ajax({
    url: 'home/',
    data: formData,
    processData: false,
    contentType: false,
    timeout: 1000,
    type: 'POST',
    headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken,
    },
    success: function(){
       ...
    },
    error: function (jqXHR, textStatus) {
      ...
    }
});

foreach($request->only('files') as $files){
    foreach ($files as $file) {
        if(is_file($file)) {    // not sure this is needed
            $fname = $file->getClientOriginalName();
            $fpath = $file->store('docs'); // path to file
        }
    }
}

Dropzone.autoDiscover = false;

var myDZ = new Dropzone("#my-dropzone", {
    url: "/home/files",
    maxFilesize: 5,
    maxFiles: 5,
    addRemoveLinks: true,
    dictDefaultMessage: 'Drop files here or click to upload <br> (max: 5 files)',
    headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken
    },
});

控制器：

$( document ).on('drop dragleave', '.file-drag', function(e){
    $(this).removeClass('drop-ready');
    if(e.originalEvent.dataTransfer.files.length) {
      e.preventDefault();
      e.stopPropagation();

      if (e.type === "drop") {
      var files = e.originalEvent.dataTransfer.files;
      AjaxFileUpload(files)
      }
    }
  });

function AjaxFileUpload(files){
    console.log(files);

    //Start appending the files to the FormData object.
    var formData = new FormData;
    formData.append('_token', CSRF_TOKEN);
    for(var i = 0; i < files.length; i++){
      formData.append(files[i].name, files[i])
    }

    console.log(formData.entries());

    $.ajax({
        //Server script/controller to process the upload
        url: 'upload',
        type: 'POST',

        // Form data
        data: formData,

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,
        // Error logging
        error: function(jqXHR, textStatus, errorThrown){
          console.log(JSON.stringify(jqXHR));
          console.log('AJAX Error: ' + textStatus + ": " + errorThrown);
        },
        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
        success: function(data){
          console.log(data);
        }
    });
  }

class UploadsController extends Controller
{
    public function UploadFiles(Request $request){
      return $request->all();
    }
}

var formElement = document.getElementById("addForm");
var formData = new FormData(formElement);
// Attach uploaded files to form submission
var files = myDZ.getAcceptedFiles();  // using Dropzone
for (var i = files.length - 1; i >= 0; i--) {
    formData.append('files[]', files[i]);
}

$.ajax({
    url: 'home/',
    data: formData,
    processData: false,
    contentType: false,
    timeout: 1000,
    type: 'POST',
    headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken,
    },
    success: function(){
       ...
    },
    error: function (jqXHR, textStatus) {
      ...
    }
});

foreach($request->only('files') as $files){
    foreach ($files as $file) {
        if(is_file($file)) {    // not sure this is needed
            $fname = $file->getClientOriginalName();
            $fpath = $file->store('docs'); // path to file
        }
    }
}

Dropzone.autoDiscover = false;

var myDZ = new Dropzone("#my-dropzone", {
    url: "/home/files",
    maxFilesize: 5,
    maxFiles: 5,
    addRemoveLinks: true,
    dictDefaultMessage: 'Drop files here or click to upload <br> (max: 5 files)',
    headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken
    },
});

Dropzone脚本：

$( document ).on('drop dragleave', '.file-drag', function(e){
    $(this).removeClass('drop-ready');
    if(e.originalEvent.dataTransfer.files.length) {
      e.preventDefault();
      e.stopPropagation();

      if (e.type === "drop") {
      var files = e.originalEvent.dataTransfer.files;
      AjaxFileUpload(files)
      }
    }
  });

function AjaxFileUpload(files){
    console.log(files);

    //Start appending the files to the FormData object.
    var formData = new FormData;
    formData.append('_token', CSRF_TOKEN);
    for(var i = 0; i < files.length; i++){
      formData.append(files[i].name, files[i])
    }

    console.log(formData.entries());

    $.ajax({
        //Server script/controller to process the upload
        url: 'upload',
        type: 'POST',

        // Form data
        data: formData,

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,
        // Error logging
        error: function(jqXHR, textStatus, errorThrown){
          console.log(JSON.stringify(jqXHR));
          console.log('AJAX Error: ' + textStatus + ": " + errorThrown);
        },
        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
        success: function(data){
          console.log(data);
        }
    });
  }

class UploadsController extends Controller
{
    public function UploadFiles(Request $request){
      return $request->all();
    }
}

var formElement = document.getElementById("addForm");
var formData = new FormData(formElement);
// Attach uploaded files to form submission
var files = myDZ.getAcceptedFiles();  // using Dropzone
for (var i = files.length - 1; i >= 0; i--) {
    formData.append('files[]', files[i]);
}

$.ajax({
    url: 'home/',
    data: formData,
    processData: false,
    contentType: false,
    timeout: 1000,
    type: 'POST',
    headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken,
    },
    success: function(){
       ...
    },
    error: function (jqXHR, textStatus) {
      ...
    }
});

foreach($request->only('files') as $files){
    foreach ($files as $file) {
        if(is_file($file)) {    // not sure this is needed
            $fname = $file->getClientOriginalName();
            $fpath = $file->store('docs'); // path to file
        }
    }
}

Dropzone.autoDiscover = false;

var myDZ = new Dropzone("#my-dropzone", {
    url: "/home/files",
    maxFilesize: 5,
    maxFiles: 5,
    addRemoveLinks: true,
    dictDefaultMessage: 'Drop files here or click to upload <br> (max: 5 files)',
    headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken
    },
});

Dropzone.autoDiscover=false；
var myDZ=新建Dropzone（“我的Dropzone”{
url:“/home/files”，
最大文件大小：5，
最大文件数：5，
addRemoveLinks：是的，
dictDefaultMessage:“将文件放到此处或单击上载
（最多5个文件）”，
标题：{
“X-CSRF-TOKEN”：Laravel.csrfToken
},
});