2017-03-24 6 views

答えて

0

あなたはこのためにはJavaScriptを必要とするようだ:

<div class="col-lg-6"> 
       <input id="userfile" name="userfile" type="file" onchange="showMyImage(this)"> 
       <img id="dummyImage" src="#" alt="your image" style="display: none; width: 200px;" /> 
      </div> 

<script> 
    function showMyImage(fileInput) { 
     var files = fileInput.files; 
     $('#dummyImage').show(); 
     for (var i = 0; i < files.length; i++) { 
      var file = files[i]; 
      var imageType = /image.*/; 
      if (!file.type.match(imageType)) { 
       continue; 
      } 
      var img = document.getElementById("dummyImage"); 
      img.file = file; 
      var reader = new FileReader(); 
      reader.onload = (function (aImg) { 
       return function (e) { 
        aImg.src = e.target.result; 
       }; 
      })(img); 
      reader.readAsDataURL(file); 
     } 
    } 
</script> 

あなたも)あなたはjavascriptのFileReaderのを(使用していることを行うことができますdocument.ready

0

にshowMyImage関数を呼び出すことができ、以下の例:

function readURL(input) { 
if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     $('.image_preview').html('<img src="'+e.target.result+'" alt="'+reader.name+'" class="img-thumbnail" width="304" height="236"/>'); 
    } 
    reader.readAsDataURL(input.files[0]); 
} 
} 

あなたのようにこの機能を使用してください - 私はcodeigniterを使用してこれについてgithubリポジトリを持っています。以下のリンクを確認してください:

https://github.com/adrianrios25/CI_upload

私はこれがあなたに役立つことを望みます。

関連する問題