HTML + JS enables local preview before uploading images

How to implement local preview before uploading images seems simple but tricky.

I have encountered such a problem during project development before. I had written the code and thought it was a good function,

So I am not particularly concerned about it. I accidentally studied it today. It was not as simple as I thought. Directly Add code

HTML code:

Copy to ClipboardReference: [www.bkjia.com] <table>
<Tr>
<Td>
<Asp: FileUpload ID = "BtnUpload" runat = "server" onchange = "onFilechange ()"/>
</Td>
</Tr>
<Tr>
<Td>


<Div id = "pic" runat = "server" style = "filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (sizingMethod = scale );
Width: 100px; height: 100px; display: none ">
</Div>

<Asp: Button ID = "Button1" runat = "server" Text = "Upload"/>
</Td>
</Tr>
<Tr>
<Td>
</Td>
</Tr>
</Table>

JS Code:

Copy to ClipboardReference: [www.bkjia.com] <script language = "javascript" type = "text/javascript">
Function onFilechange (){
Var url = $ ("# BtnUpload"). attr ("value ");
$ ("# ImagePhoto" ).css ("width", "0 ");
$ ("# ImagePhoto" ).css ("height", "0 ");
$ ("# Pic" ).css ("display", "block ");
Document. getElementById ("pic"). filters. item ("DXImageTransform. Microsoft. AlphaImageLoader"). src = url;
}
</Script>

Note the following code:

Copy to ClipboardReference: [www.bkjia.com] <div id = "pic" runat = "server" style = "filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (sizingMethod = scale );
Width: 100px; height: 100px; display: none ">
</Div>

The div here is used to preview the photo. The default image control is loaded during initialization. When a new photo is selected, the image control is hidden and the image is displayed.

Filter: Progid: DXImageTransform. Microsoft. AlphaImageLoader (sizingMethod = scale) is a built-in library of Microsoft. It is used to preview local images.

There will be a problem here. In the web page, images do not recognize absolute paths, but only network paths. I think this library should convert local paths into network paths. (Personal guess !)