HTML - Display Image After Selecting Filename

HTML - Display image after selecting filename

Here You Go:

HTML

<!DOCTYPE html>
<html>
  <head>
    <link
      class="jsbin"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      class="jsbin"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
    ></script>
    <script
      class="jsbin"
      src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"
    ></script>
    <meta charset="utf-8" />
    <title>JS Bin</title>
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
      article,
      aside,
      figure,
      footer,
      header,
      hgroup,
      menu,
      nav,
      section {
        display: block;
      }
    </style>
  </head>
  <body>
    <input type="file" onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
  </body>
</html>

Script:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#blah').attr('src', e.target.result).width(150).height(200);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

Live Demo

Preview an image before it is uploaded

imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}

<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

Display image after selecting file

Try this approach:

<img id="blah" class="photo" ImageUrl="img/user-5.png" />
<label for="imgInp" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i>Add Image
</label>
<input type='file' id="imgInp" name="image" />


<script>
//Preview & Update an image before it is uploaded
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function () {
        readURL(this);
    });
</script>


<style type="text/css">
input[type="file"] {
     display: none;
}

.custom-file-upload {
    border: 1px solid rgb(197, 197, 197);
    border-radius: 4px 4px 4px 4px;

    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    float: right;
    width: 5.25em;
    margin-left:200px;
}

.photo{
    width: 7em; 
    height: 9em; 
    border: 1px solid rgb(197, 197, 197); 
    border-radius: 4px 4px 4px 4px; 
    float:right;
}
</style>

Hope this helps...

How to preview selected image in input type= file in popup using jQuery?

Demo

HTML:

 <form id="form1" runat="server">
   <input type='file' id="imgInp" />
   <img id="blah" src="#" alt="your image" />
</form>

jQuery

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

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

Reference

how to show preview of a video and an image selected using the same html input type=file

In order to display any <image> and <video> from using the same <input> button then you must dynamically create such elements as needed.

This means:

Detect what File type the user selected.
Create a Path to the selected File.
Create the relevant Element and set Path as .src input.
Remove any pre-existing Element from your container (usually a <div>).
.append the newly created Element for display on the page.

No JQuery but this is how you can achieve with regular JavaScript code :

I used your Div as the container (had to add an id="display-img-vid-con" for later reference with JS).
Added a style="" with absolute position to control the container's X/Y coords using top and left).

( ...experiment with it)

<!DOCTYPE html>
<html>
<body>

    <!-- button for selecting image/video -->
    <label for="inp-img-vid">
      <span> Photos/Videos</span>
      <input type="file" accept="image/*, video/*" name="img-vid" id="inp-img-vid">
    </label>

    <div class="display-img-vid-con" id="img-vid-con"  style="top: 30px; left: 250px;  position: absolute; z-index: 1" >
    
      <!-- showing selected image here -->
      <!-- showing selected video here -->
    
    </div>

</body>

<script>

//$("#inp-img-vid").change( function(){ imgPreview(this); } );
document.getElementById("inp-img-vid").addEventListener("change", onFileSelected, false);

var tmpElement; //will be dynamically changed to Image or Video

var file, file_ext, file_path, file_type, file_name;


function show_Info_popUP()
{
    alert("File is selected... " + "\n name : " + file_name  + "\n type : " + file_type + "\n ext : " + file_ext );
}

function onFileSelected ( input )
{
 
    //if(input.files && input.files[0])
    if( input.target.files[0] )
    {
        file = input.target.files[0]; // FileList object
        
        file_ext; //# will extract file extension
        file_type = file.type; file_name = file.name;
        file_path = (window.URL || window.webkitURL).createObjectURL(file);
        
        //# get file extension (eg: "jpg" or "jpeg" or "webp" etc)
        file_ext = file_name.toLowerCase();
        file_ext = file_ext.substr( (file_ext.lastIndexOf(".")+1), (file_ext.length - file_ext.lastIndexOf(".")) );
        
        //# get file type (eg: "image" or "video")
        file_type = file_type.toLowerCase();
        file_type = file_type.substr( 0, file_type.indexOf("/") );
        
        let reader = new FileReader();
        reader.readAsDataURL(file);
        
        //reader.onload = function(e)
        reader.onloadend = function(evt) 
        { 
            //# POP-UP ...if you want to show (Alert box with) file details...
            show_Info_popUP();
            
            if (evt.target.readyState == FileReader.DONE) 
            {
                //# get container...
                let container = document.getElementById("img-vid-con");
                
                //# remove any already existing child element(s)
                while (container.firstChild)  
                { container.removeChild(container.firstChild); }
                
                //# if IMAGE...
                if ( file_type == "image" )
                {
                    tmpElement = document.createElement( "img");
                    tmpElement.setAttribute("id", "preview-img");
                }
                
                //# if VIDEO...
                if ( file_type == "video" )
                {
                    tmpElement = document.createElement( "video");
                    tmpElement.setAttribute("id", "preview-vid");
                    tmpElement.setAttribute("controls", "true" );
                    
                    tmpElement.addEventListener("loadeddata", () => 
                    {
                        //# what to do when some video data is loaded
                        
                        if (tmpElement.readyState >= 3) 
                        { 
                            //# what to do when video's first frame is ready
                            tmpElement.muted = true; //# if you want silent preview
                            tmpElement.play();
                        }
            
                    }); 
                }
                
                //# finalise display size
                tmpElement.width = 640; tmpElement.height = 400;
                
                tmpElement.setAttribute("src", file_path);
                container.appendChild(tmpElement);
            }
        
        }
        
    }
}
    
</script>

</html>

How to display file name for custom styled input file using jquery?

You have to bind and trigger the change event on the [type=file] element and read the files name as:

$('#file-upload').change(function() {  var i = $(this).prev('label').clone();  var file = $('#file-upload')[0].files[0].name;  $(this).prev('label').text(file);});

.custom-file-upload {  border: 1px solid #ccc;  display: inline-block;  padding: 6px 12px;  cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form>  <label for="file-upload" class="custom-file-upload">    <i class="fa fa-cloud-upload"></i> Upload Image  </label>  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;"></form>

How to display image name after upload in HTML?

It displays to the console because you tell it to.

$('#picture').change(function(e){
  var filename = e.target.files[0].name;
  console.log(filename);
});

What you need to do is find the element that you're looking to list the uploads and then change the text for example

$('#picture').change(function(e){
      var filename = e.target.files[0].name;
      $('#picture01Desc').text(filename)
    });

How to display an image file name in input field after uploading an image in jQuery

Your code was fine. You just didn't attach a change listener to the file input that calls setImage.

function setImage(input) {
    let $imgBox = $(input).closest('dd').find('.img_box');
    var reader = new FileReader();
    reader.onload = function (e) {
        $imgBox.html( $('<img>').attr('src', e.target.result) );
        let fileName = input.files[0].name;
        $(input).closest('dd').find(".folder_box img").attr('src',e.target.result)
        $(input).closest('dd').find(".folder_box img").attr('data-file',fileName)
        $(input).closest('dd').find('.info').html(fileName);
        $("#image_main_file_name").val(fileName);
    };
    reader.readAsDataURL(input.files[0]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="folder_box inb">
    <input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
    <p class="folder_img"></p>
</label>
<div class="info">
    <input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here"> 
</div>

Preview images before upload

Here is jQuery version for you. I think it more simplest thing.

$(function() {    // Multiple images preview in browser    var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files) {            var filesAmount = input.files.length;
            for (i = 0; i < filesAmount; i++) {                var reader = new FileReader();
                reader.onload = function(event) {                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);                }
                reader.readAsDataURL(input.files[i]);            }        }
    };
    $('#gallery-photo-add').on('change', function() {        imagesPreview(this, 'div.gallery');    });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple id="gallery-photo-add"><div class="gallery"></div>

Javascript image upload and display

You may want to checkout this solution (where my code derives from). It involves a little bit of jQuery but if you truly must write it out in pure JS, here you go.

Note: I modified your tags to conform to the JS below. Also try to stay away from writing any inline scripts. Always good to keep your HTML and JS loosely coupled.

var fileTag = document.getElementById("filetag"),    preview = document.getElementById("preview");    fileTag.addEventListener("change", function() {  changeImage(this);});
function changeImage(input) {  var reader;
  if (input.files && input.files[0]) {    reader = new FileReader();
    reader.onload = function(e) {      preview.setAttribute('src', e.target.result);    }
    reader.readAsDataURL(input.files[0]);  }}

<input type="file" id="filetag"><img src="" id="preview">

HTML - Display Image After Selecting Filename