javascript - How to preview image before upload using memory stream - Stack Overflow

I need to preview the image before upload.I was able to pass the file path from view to controller,in the controller using memory stream class i am trying to preview the image before saving it to database.Could any one provide me any sample or example for this Thanks!

I need to preview the image before upload.I was able to pass the file path from view to controller,in the controller using memory stream class i am trying to preview the image before saving it to database.Could any one provide me any sample or example for this Thanks!

• javascript
• asp-mvc-3

Share Follow asked Jul 3, 2012 at 4:11 SahithiPinisettySahithiPinisetty 20722 gold badges66 silver badges1414 bronze badges 3

• 1 Please improve your question so it is possible to answer: tag with language you are using, clarify where "file path" is pointing to (local user machine file path, server side path to existing file, server side path to temporary file, some other path?). – Alexei Levenkov Commented Jul 3, 2012 at 4:21
• i am using asp mvc3.The path is local user machine file path which is "C:/foldername/imagename.jpg".I need to preview image before upload using server side scripting.@Alexeli Levenkov – SahithiPinisetty Commented Jul 3, 2012 at 4:26
• 1 Please edit your question with above information, and specify language (VB.Net, IronPython...). Note: local file path is not exactly useful for server side script as server obviously can't access file on user's machine. How/why you are getting this path to server? – Alexei Levenkov Commented Jul 3, 2012 at 4:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

<script type="text/javascript">        
    function readfile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

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

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>



 <form id="form1">
  <input type='file' onchange="readfile(this);" />
  <img id="image_preview" src="#" alt="your image" width="200" height="200"/>
</form>

I have created bin also, try using this link http://codebins./codes/home/4ldqpc4

Please check below urls

http://weblogs.asp/imranbaloch/archive/2010/04/03/image-preview-in-asp-net-mvc.aspx

image upload and preview in mvc 2