Как сделать загрузку простого изображения с помощью Javascript/HTML

Кто-нибудь знает, как сделать простую загрузку изображения и отобразить его на странице.

Это то, что я ищу.

Пользователь (я) выберет изображение
На странице будет отображаться изображение без обновления страницы или перехода к другому файлу.
несколько <img src> будут делать, потому что мне нужно отображать разные размеры изображения.

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

<style>
    /* Image Designing Propoerties */
    .thumb {
        height: 75px;
        border: 1px solid #000;
        margin: 10px 5px 0 0;
    }
</style>

<script type="text/javascript">
    /* The uploader form */
    $(function () {
        $(":file").change(function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();

                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }
        });
    });

    function imageIsLoaded(e) {
        $('#myImg').attr('src', e.target.result);
        $('#yourImage').attr('src', e.target.result);
    };

</script>


<input type='file' />
</br><img id="myImg" src="#" alt="your image" height=200 width=100>

Ответы

Ответ 1

Итак, вот мой полный код:

HTML:

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

JavaScript:

<script>
   function previewFile(){
       var preview = document.querySelector('img'); //selects the query named img
       var file    = document.querySelector('input[type=file]').files[0]; //sames as here
       var reader  = new FileReader();

       reader.onloadend = function () {
           preview.src = reader.result;
       }

       if (file) {
           reader.readAsDataURL(file); //reads the data as a URL
       } else {
           preview.src = "";
       }
  }

  previewFile();  //calls the function named previewFile()
  </script>

Ответ 2

Вот простой пример без jQuery. Вы можете использовать URL.createObjectURL, который

создает строку DOMString, содержащую URL-адрес, представляющий объект, указанный в параметре

Затем вы можете просто установить src изображения для этого URL, и изображение загрузится.

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (this.files && this.files[0]) {
          var img = document.querySelector('img');  // $('img')[0]
          img.src = URL.createObjectURL(this.files[0]); // set src to file url
          img.onload = imageIsLoaded; // optional onload event listener
      }
  });
});

function imageIsLoaded(e) { alert(e); }

<input type='file' />
<br><img id="myImg" src="#" alt="your image" height=200 width=100>

Ответ 3

Попробуйте это, он поддерживает загрузку нескольких файлов,

$('#multi_file_upload').change(function(e) {
    var file_id = e.target.id;

    var file_name_arr = new Array();
    var process_path = site_url + 'public/uploads/';

    for (i = 0; i < $("#" + file_id).prop("files").length; i++) {

        var form_data = new FormData();
        var file_data = $("#" + file_id).prop("files")[i];
        form_data.append("file_name", file_data);

        if (check_multifile_logo($("#" + file_id).prop("files")[i]['name'])) {
            $.ajax({
                //url         :   site_url + "inc/upload_image.php?width=96&height=60&show_small=1",
                url: site_url + "inc/upload_contact_info.php",
                cache: false,
                contentType: false,
                processData: false,
                async: false,
                data: form_data,
                type: 'post',
                success: function(data) {
                    // display image
                }
            });
        } else {
            $("#" + html_div).html('');
            alert('We only accept JPG, JPEG, PNG, GIF and BMP files');
        }

    }
});

function check_multifile_logo(file) {
    var extension = file.substr((file.lastIndexOf('.') + 1))
    if (extension === 'jpg' || extension === 'jpeg' || extension === 'gif' || extension === 'png' || extension === 'bmp') {
        return true;
    } else {
        return false;
    }
}

Здесь #multi_file_upload - это идентификатор поля загрузки изображения.

Ответ 4

<script type"text/javascript">
function preview_image(event) {
var reader = new FileReader();
reader.onload = function(){
var output = documenter code hereent.getElementById('output_image');
output.src = reader.result;}
reader.readAsDataURL(event.target.files[0]);}
</script>