预览图像yii2使用javascript

我想在我的yii2应用somethink这样实现： How to preview multiple images before upload? 我需要显示多个图像（最多5个）请告诉我错我的代码？当我选择文件没有发生。预览图像yii2使用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(); ?>

来源

2017-02-15 Rosti

而不是.addEventListener("change", previewImages, false);尝试.addEventListener("click", previewImages, false);。由于单击UI按钮不会执行任何操作，因此元素必须具有DOM更改才能使事件侦听器当前执行。

来源

2017-02-15 14:41:44

我总是有这个错误未捕获TypeError：无法在FileReader读取属性为' '的属性'appendChild'。（index.php：130） at line： preview.appendChild（image）; – Rosti

这是因为document.querySelector（'＃preview'）返回null。你有class =“preview”的div，而不是id =“preview”，所以正确的查询是document.querySelector（“。preview”） – sonofagun

预览图像yii2使用javascript

回答

相关问题