Как загрузить несколько изображений с использованием одного входа и без использования нескольких атрибутов в laravel - PullRequest
Новая
       6

Как загрузить несколько изображений с использованием одного входа и без использования нескольких атрибутов в laravel

0 голосов
/ 06 февраля 2020

Я хотел бы загрузить несколько изображений, используя один тег ввода ( с предварительным просмотром изображения ) и без использования нескольких атрибутов в теге ввода, я использовал следующий скрипт, но я не мог помочь, чтобы он всегда брал последнее изображение ввода в массиве не целые изображения.

HTML 

<form id="profile-photos-form" class="profile_image_gallery" name="profile_image_gallery" action="{{ URL::to('create_profile')}}" method="post" enctype="multipart/form-data">

        <div class="mdb-lightbox no-margin " id="result">
            <input type="file" name="photos[]" id="files">

            <div class="width-33 gallary-image-profile-pic">
                <!-- Following is only for set profile image from upload images -->
                <a class="spotlight" href="">
                    <img class="photo_class" name="profile_image"  src="" class="img-fluid">
                    <input type="hidden" name="profile_pic" id="profile_pic" value="">
                </a>
            <div class="icons-images">
            <i class="fa fa-plus icon_delete_add" aria-hidden="true" style="color: white;"></i>
            <i class="fa fa-trash icon_delete_add" aria-hidden="true" style="color: white;"></i>
            </div>
            </div>
            <!-- Uploaded image preview will show here -->
            <div id="thumb-output"></div>
        </div>
</form>

JS

window.onload = function(){    
    if(window.File && window.FileList && window.FileReader){
        var filesInput = document.getElementById("files");        
        filesInput.addEventListener("change", function(event){            
            var files = event.target.files; //FileList object
            var output = document.getElementById("result");            
            for(var i = 0; i< files.length; i++)            {
                var file = files[i];                
                //Only pics
                if(!file.type.match('image'))
                  continue;                
                var picReader = new FileReader();                
                picReader.addEventListener("load",function(event){                    
                    var picFile = event.target; 
                    console.log(picFile)                   
                    var div = document.createElement("div");
                    var div1 = document.createElement("div");
                    div.classList.add("width-16");
                    div.classList.add("gallary-image");

                     div.innerHTML = "<img name='image_gallery[]' class='photo_class' src='" + picFile.result + "'" +
                            "title='" + picFile.name + "'/>";        



                    output.insertBefore(div,null);



                });
                picReader.readAsDataURL(file);
            }
        });
    }else{
        console.log("Your browser does not support File API");
    }
}

PHP Laravel Код контроллера 

<?php
namespace App\Http\Controllers\escortProfile;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Cartalyst\Sentinel\Checkpoints\NotActivatedException;
use Cartalyst\Sentinel\Checkpoints\ThrottlingException;
use Cartalyst\Sentinel\Laravel\Facades\Activation;
use Illuminate\Routing\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redire;
use Cartalyst\Sentinel\Laravel\Facades\Sentinel;
use App\Mail\UserRegistration;

use App\UserDetails;
use App\User;
use App\Roles;
use App\Locations;
use DB;
use Response;
use File;
use App\Http\Middleware\Admin;

class profileController extends Controller{
    public function createProfile(Request $request){   
       if ($image = $request->file('photos')) {            
            foreach ($image as $files) {           
                $destinationPath = 'public/image/'; // upload path
                $profileImage = date('YmdHis') . "." . $files->getClientOriginalExtension();
                $files->move($destinationPath, $profileImage);
                $insert[]['image'] = $profileImage;
            }
        }
    }
}

Этот код возвращает только последнее входное изображение в массиве, не возвращает все изображения, я хочу все изображения, а также перемещаю все загруженные изображения в папку и база данных.

ПРИМЕЧАНИЕ: в настоящее время я не написал код хранилища БД.

...