Vorschaubilder in yii2 mit Hilfe von Javascript

ich in meinem yii2 app some so implementieren möchten: How to preview multiple images before upload? ich mehrere Bilder (max 5) Was ist falsch mit meinem Code zu müssen? Als ich die Datei wählte, passierte nichts.Vorschaubilder in yii2 mit Hilfe von Javascript

<?php 
use yii\helpers\Html; 
use yii\widgets\ActiveForm; 
?> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<?php $form = ActiveForm::begin(); ?> 


    <div class="row"> 
     <div class="col-lg-6"> 
      <p class="add_photo"><img class="describe_images" src="photo.png"></img>Добавить фото(до 5 штук)</p> 
      <input id="file-input" type="file" multiple> 
      <script> 
      function previewImages() { 
       var preview = document.querySelector('#preview'); 
       if (this.files) { 
       [].forEach.call(this.files, readAndPreview); 
       } 
       function readAndPreview(file) { 
       // Make sure `file.name` matches our extensions criteria 
       if (!/\.(jpe?g|png|gif)$/i.test(file.name)) { 
        return alert(file.name + " is not an image"); 
       } // else... 
       var reader = new FileReader(); 
       reader.addEventListener("load", function() { 
        var image = new Image(); 
        image.height = 100; 
        image.title = file.name; 
        image.src = this.result; 
        preview.appendChild(image); 
       }, false); 
       reader.readAsDataURL(file); 

       } 
      } 
      document.querySelector('#file-input').addEventListener("change", previewImages, false); 
      </script> 

     </div> 

     <div class="col-lg-6 pixels-line"> 
      <div class="preview"></div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <?= Html::submitButton('Отправить', ['class' => 'btn btn-primary']) ?> 
    </div> 

<?php ActiveForm::end(); ?>

Quelle

2017-02-15 Rosti

Statt .addEventListener("change", previewImages, false); versuchen .addEventListener("click", previewImages, false);. Wenn Sie auf die Schaltfläche "UI" klicken, wird das Element für den momentan auszuführenden Ereignis-Listener geändert.

Quelle

2017-02-15 14:41:44

Ich habe diesen Fehler immer Uncaught Typeerror: kann nicht lesen Eigenschaft ‚appendChild‘ von null bei Filereader. (index.php: 130) bei Zeile: preview.appendChild (Bild); – Rosti

Das liegt daran, dass document.querySelector ('# preview') null zurückgibt. Sie haben ein div mit class = "preview", nicht id = "preview", also ist die richtige Abfrage document.querySelector (". Preview") – sonofagun

Vorschaubilder in yii2 mit Hilfe von Javascript

Antwort

Verwandte Themen