Heim > Web-Frontend > js-Tutorial > Beispiel-Tutorial für ein Bild zur Dateisteuerungsauswahl

Beispiel-Tutorial für ein Bild zur Dateisteuerungsauswahl

零下一度
Freigeben: 2017-07-26 16:56:04
Original
1569 Leute haben es durchsucht

So zeigen Sie die Bilder gleichzeitig auf img an, wenn Sie Bilder mit dem FileUpload-Steuerelement durchsuchen und auswählen (ohne auf Hochladen zu klicken):
Ich habe lange danach gesucht Du gehörst mir und kannst es noch einmal versuchen.
Js-Teil:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<script type="text/javascript">

    function ShowImg(obj) {

        var AllowExt = ".jpg|.gif|.bmp|.png|";

        var FileExt = obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();

        if (AllowExt != 0 && AllowExt.indexOf(FileExt + "|") == -1) //判断文件类型是否允许上传

        {

            alert("您上传的不是图片!");

        }

        else {

            var newPreview = document.getElementById("PreviewImg2");

            newPreview.src = obj.value;

        }

    }

</script>

Nach dem Login kopieren

Körperteil:

1

2

<img id="PreviewImg2" alt="" src="" width="140px" height="115px" />

 <asp:FileUpload ID="FileUpload1" runat="server" onchange="ShowImg(this)" />

Nach dem Login kopieren

Diese Methode wurde von mir persönlich getestet und kann hoffentlich angewendet werden hilfreich für Sie! Wenn es funktioniert, vergessen Sie nicht, es zu mögen! ! !

Der Code lautet wie folgt:

1

2

3

4

5

6

7

8

9

10

11

12

<script>$(function() {

        $("#Book_Fiel").change(function() {var $file = $(this);var fileObj = $file[0];var windowURL = window.URL || window.webkitURL;var dataURL;var $img = $("#Book_Picture");if (fileObj && fileObj.files && fileObj.files[0]) {

                dataURL = windowURL.createObjectURL(fileObj.files[0]);

                $img.attr(&#39;src&#39;, dataURL);

            } else {

                dataURL = $file.val();var imgObj = document.getElementById("preview");// 两个坑:// 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;// 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

 

            }                });

    }

    );

    </script>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial für ein Bild zur Dateisteuerungsauswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage