Display file preview before upload in JavaScript

I can display a preview of an image before to upload it, but how can I do the same using a pdf or a simple txt file? Here's the code I found for the images:

<form id="form1" runat="server"> <input type='file' id="imgInp" /> <img id="blah" src="#" alt="your image" /> </form> 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); });

I would like suggestions using an AngularJs approach. Thanks

Category:javascript Views:4 Time:2018-12-23

Related post

  • Remove selected file(s) before upload with Javascript 2012-02-18

    Say I have a form that allows users to upload multiple images, which are appended with an option to remove them if they don't want to upload that particular photo. Is it possible to remove the value from the files object of the one that they removed

  • Rails+javascript - image preview before upload 2011-04-08

    I want to show an image preview before upload, for that I am using the code given below. It works with firefox, but doesn't work with IE8 <%= image_tag @image, :id=>"preview-photo" %> <%= file_field 'image','photo', :onchange => "previ

  • image preview before upload in IE and Chrome 2011-05-02

    I am trying to design a module in which i would like to show a preview of the image to the user before he uploads the image to database. i have found at a solution which works for Firefox but is not working for IE and Chrome...Can someone help me out

  • Asp.Net Check file size before upload 2010-06-22

    I want to check the selected file size BEFORE uploading a file with the asp fileupload component. I can not use activex because the solution have to works on each browser (firefox, Chrome, etc..) How can I do that ? Thanks for your answers.. --------

  • how is upload image with progress bar and Image Preview before upload to database by jQuery? 2011-07-16

    how is upload image with progress bar and Image Preview before upload to database with use of jQuery and codeigniter. --------------Solutions------------- Not sure if its possible to preview an image you select from your disk on a website BEFORE its

  • How to get file size before uploading? 2011-06-03

    Is there any possible way to get the size of a file before uploading it through the browser? I found Check file size before uploading file, but the script doesn't work with Internet Explorer 6, 7 or 8. I have not tested with IE 9. I'm looking for a s

  • Get file size before uploading 2011-09-21

    Is there any way to find out the file size before uploading the file using AJAX / PHP in change event of input file? --------------Solutions------------- For the HTML bellow <input type="file" id="myFile" /> try the following: //binds to onchan

  • File compression before upload on the client-side 2011-12-04

    Basically I'll be working with large XML files (approx. 20 - 50 MB). These files needs to be uploaded on a server. I know it isn't possible to touch the files with javascript, nor to implement HTTP compression on the client-side. My question is that

  • Validate File size before upload 2012-03-28

    I need to validate the file which is to be uploaded to the server. The validation must be done before uploading it. i.e., validation completed at client side. This task should be accomplished in ASP.NET MVC3 Webpage. It should also work with all brow

  • how can we check file types before uploading them in asp.net? 2010-03-14

    how can we check file types (formats such as jpg) without using file extensions before uploading them with asp.net & c# ? i am using vs 2008 + asp.net + c# + TELERIK Controls (RadUpload) imagine that some body change the text file extension to jp

  • Check file size before upload on server in IE Asp.net Jquery HttpHandler 2012-03-10

    I am working on a file upload control using jQuery and HttpHandler to upload file asynchronously in ASP.NET C#. I want to check file size before upload it on server in non-IE browser (e.g Mozilla, chrome) I can easily check the file size but in IE I

  • How to upload preview image before upload through JavaScript 2010-11-04

    I want to preview an image before uploading it to the server. I have written a little bit code for it, but it is only being previewed in Internet Explorer, not in other browsers like Safari, Chrome, Firefox, due to some type of security reasons. Is t

  • How to remove files from upload array (before upload) via Javascript 2012-02-27

    In simplest terms, I have a file select form which allows for multiple files to be selected for upload: <form enctype="multipart/form-data" method="post" id="image_upload_form"> <input type="file" multiple="multiple" id="image_upload" name="

  • Images preview before uploading 2014-04-09

    So I have here my upload script and it has a function that the user can preview selected images before uploading but my problem is that every time I'll upload all images available for preview it is always the last file chosen. Heres my code: <scri

  • Other ways to check the file size before upload 2010-02-03

    Is there any other way that I can just check the size of a file before upload? The requirement is if the file exceeded the limit, the form mustn't submit. If it's not, I have to do the ordinary upload using the form and I don't have to exactly upload

  • How to zip 100 mb files during (before) upload so that upload speed can be increased? 2010-07-01

    Possible Duplicate: HTML Compress File Upload? I have complains from client that my website is taking more time to upload the 100 MB time (I know it bound to take more time because of this size), hence I am planning to upload files such that they get

  • No client script to check file size before uploading [Discusssion Question] 2010-07-24

    I am developing the web based application which require to check size of any file before uploading it on server. It would have been easy if there was any means by which web developer can check size of file at client side instead of checking at server

  • Getting upload file size before upload 2010-11-16

    When the user selects a file to be uploaded, is there a way I can get the exact size of this file before the upload even begins? I'm guessing this needs to be done on the client side with jQuery or JavaScript. Any ideas how? --------------Solutions--

  • java - checking file content before uploading to server 2011-05-11

    i have got a situation now. I need to develop a webpage where user can select a file to upload and before uploading the file to server i need to check first few lines of the file whether the data is valid or not and if the data is valid then upload t

  • How to check .xls file size before uploading in ASP.NET 4? 2011-10-31

    Following is a part of my ASP.NET code: <asp:FileUpload ID="fuUploader" runat="server" /> <br /> <asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" /> Is it possible to check file size (to be less than

  • Using Ruby and SCP/SSH, how to determine if a file exists before uploading a copy 2009-10-26

    I'm uploading a file to a remote server using SCP, but what's the proper way of seeing if that file exists before doing so? --------------Solutions------------- Beware check-then-upload: this is not atomic and may lead to race conditions (or TOCTOU v

  • paperclip process file contents before upload 2011-02-27

    I want to compute a hash before uploading a file so that no duplicates are stored on the server. Using the paperclip gem, what's the best approach to do processing on a file before saving it or inserting data in the database? --------------Solutions-

  • Change file names before uploading with SWFUpload 2012-04-24

    I am using SWFUpload to allow users to upload multiple files in any browser. A user can provide custom file names for the files being uploaded. How can I iterate through all the queued files and update the name of the file to the custom name before t

  • Options for client side zip file extraction before upload 2011-06-24

    Our problem We are building a browser based application that allows a user to upload files to a server for processing. The server side is written in PHP using the Codeigniter v2.0.2 framework. The files to be uploaded are the output of another system

  • How to preview a image before upload using JavaScript or jquery? 2011-07-29

    I just need to display the image chosen (Browse) by the user before the upload. For this purpose i am using this code: JS function setImage(file) { if(document.all) document.getElementById('prevImage').src = file.value; else document.getElementById('

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.126 (s). 11 q(s)