Geek Answers Handbook

Preview without uploading to my server

Hello, how can I view the image without uploading it to my server in asp.net C #, and when I see the image, I have to click the "Download" button to upload it to the server.

+7
source share
2 answers

In a browser that supports HTML5, you can use the FileReader object to read a file from hdd users as a base64 encoded string. You can use this base64 view with css to show a preview. In older browsers, you will need flash or similar plugin-based code for this.

Here is an example of HTML5 that works in all modern browsers:

<html> <head> <script> var elmFileUpload = document.getElementById('file-upload'); function onFileUploadChange(e) { var file = e.target.files[0]; var fr = new FileReader(); fr.onload = onFileReaderLoad; fr.readAsDataURL(file); } function onFileReaderLoad(e) { var bgStyle = "url('" +e.target.result + "')"; elmFileUpload.parentElement.style.background = bgStyle; }; elmFileUpload.addEventListener('change',onFileUploadChange,false); </script> </head> <body> <input type="file" id="file-upload"/> </body> </html>

See the fiddle here

+10
source

Yes it is possible.

HTML

 <input type="file" accept="image/*" onchange="showMyImage(this)" /> <br/> <img id="thumbnil" style="width:20%; margin-top:10px;" src="" alt="image"/>

Js

  function showMyImage(fileInput) { var files = fileInput.files; 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("thumbnil"); img.file = file; var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } }

You can get Live Demo from here.

+2
source

More articles:


All Articles