File control selection picture example tutorial-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

File control selection picture example tutorial

Jul 26, 2017 pm 04:56 PM

file picture

How to display the FileUpload control on img at the same time when browsing and selecting pictures (without pressing upload) The following code can achieve this:
I have been looking for this for a long time. I will give you mine and you can try it again. .
Js part:

&lt;script type=&quot;text/javascript&quot;&gt;
    function ShowImg(obj) {
        var AllowExt = &quot;.jpg|.gif|.bmp|.png|&quot;;
        var FileExt = obj.value.substr(obj.value.lastIndexOf(&quot;.&quot;)).toLowerCase();
        if (AllowExt != 0 &amp;&amp; AllowExt.indexOf(FileExt + &quot;|&quot;) == -1) //判断文件类型是否允许上传
        {
            alert(&quot;您上传的不是图片！&quot;);
        }
        else {
            var newPreview = document.getElementById(&quot;PreviewImg2&quot;);
            newPreview.src = obj.value;
        }
    }
&lt;/script&gt;

Copy after login

Body part:

1 2	`<img id="PreviewImg2" alt="" src="" width="140px" height="115px" />` `<asp:FileUpload ID="FileUpload1" runat="server" onchange="ShowImg(this)" />`

Copy after login

This method was tested by me personally and can be used. I hope it will be helpful to you! If it works, don’t forget to like it! ! !

The code is as follows:

&lt;script&gt;$(function() {
        $(&quot;#Book_Fiel&quot;).change(function() {var $file = $(this);var fileObj = $file[0];var windowURL = window.URL || window.webkitURL;var dataURL;var $img = $(&quot;#Book_Picture&quot;);if (fileObj &amp;&amp; fileObj.files &amp;&amp; fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr(&#39;src&#39;, dataURL);
            } else {
                dataURL = $file.val();var imgObj = document.getElementById(&quot;preview&quot;);// 两个坑:// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；imgObj.style.filter = &quot;progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)&quot;;
                imgObj.filters.item(&quot;DXImageTransform.Microsoft.AlphaImageLoader&quot;).src = dataURL;
 
            }                });
    }
    );
    &lt;/script&gt;

Copy after login

The above is the detailed content of File control selection picture example tutorial. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn