How to Display Selected Image Without Sending Data to Server

How to display selected image without sending data to server?

You can use FileReader web-api object for this, see this snippet:

the HTML

<input id="src" type="file"/> <!-- input you want to read from (src) -->
<img id="target"/> <!-- image you want to display it (target) -->

the javascript

function showImage(src,target) {
  var fr=new FileReader();
  // when image is loaded, set the src of the image where you want to display it
  fr.onload = function(e) { target.src = this.result; };
  src.addEventListener("change",function() {
    // fill fr with image data    
    fr.readAsDataURL(src.files[0]);
  });
}

var src = document.getElementById("src");
var target = document.getElementById("target");
showImage(src,target);

Is that possible to display image thumbnail without uploading it to the server?

If you could enforce an HTML 5 capable browser you could use the file-api

Example: http://html5demos.com/file-api

Is there any way to display image in client browser without uploading it to server?

Due to security reasons, you will not be able to display the images to the users without uploading them to the server. Displaying images from file system is considered a security risk.

EDIT: To remove the unused images, you can create a thread to run a cleanup routine to which will delete them from the upload directory regularly.

How to display a image selected from input type = file in reactJS

Try this

<input type="file" onChange={this.onImageChange} className="filetype" id="group_image"/>

Add method to class

onImageChange = (event) => {
  if (event.target.files && event.target.files[0]) {
    let reader = new FileReader();
    reader.onload = (e) => {
      this.setState({image: e.target.result});
    };
    reader.readAsDataURL(event.target.files[0]);
  }
}

or you can use URL.createObjectURL

onImageChange = (event) => {
 if (event.target.files && event.target.files[0]) {
   this.setState({
     image: URL.createObjectURL(event.target.files[0])
   });
 }
}

And display image

<img id="target" src={this.state.image}/>

For the hook version:

const [image, setImage] = useState(null)

const onImageChange = (event) => {
 if (event.target.files && event.target.files[0]) {
   setImage(URL.createObjectURL(event.target.files[0]));
 }
}

return (
  <div>
    <input type="file" onChange={onImageChange} className="filetype" />
    <img src={image} alt="preview image" />
  </div>
)

How to display an image immediately after user selects it from their file explorer?

Hello you can do it with jQuery, for example:

function img_pathUrl(input){
        $('#img')[0].src = (window.URL ? URL : webkitURL).createObjectURL(input.files[0]);
    }

#img {
  background: #ddd;
  width:100px;
  height: 90px;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img id="img">
<br>
<input type="file" id="img_file" name="img_file" onChange="img_pathUrl(this);">

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

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>

Retrieve image data from file input without a server

This link may be helpful to you - https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

I took one method from that page and added some additional functionality to hide the file upload button and have the image placeholder trigger its click event.

$('#placeholder').click(function() {
  $('#img-upload').trigger('click');
});

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<img width="250" height="250" id="placeholder" src="http://place-hold.it/250x250&text='click to upload'">
<input class="hidden" type="file" onchange="previewFile()" id="img-upload">

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

---

Related Topics