jquery - jqueryでアップロードする前に画像をプレビューする方法

Question

javascript fileReader を使用してアップロードされた画像を読み取ることができますが、アップロードする前に画像をプレビューできるように、アップロードされた画像を jquery で読み取るにはどうすればよいですか?

Answer 1

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#previewHolder').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  } else {
    alert('select a file to see preview');
    $('#previewHolder').attr('src', '');
  }
}

$("#filePhoto").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<br/><br/>
<input type="file" name="filePhoto" value="" id="filePhoto" class="required borrowerImageFile" data-errormsg="PhotoUploadErrorMsg">
<br/><br/>
<img id="previewHolder" alt="Uploaded Image Preview Holder" width="250px" height="250px" style="border-radius:3px;border:5px solid red;"/>

Answer 2

プレビュー用

<input type="file" oninput="image.src=window.URL.createObjectURL(this.files[0])" />
<img id="image" width="100px" height="100px"/>

Answer 3

あるいは、jquery プラグインも使用できます。

良いオプションの 1 つは、dropify です。

Dropifyの詳細を読む