Heim > Artikel > Web-Frontend > Einfache Bild-Upload-Funktion per Klick
Einfache Bild-Upload-Funktion per Klick
- php中世界最好的语言Original
- 2018-03-08 11:14:188328Durchsuche
Dieses Mal bringe ich Ihnen eine einfache Click-to-Upload-Funktion für Bilder Hier sind die praktischen Fälle Schauen Sie mal rein.
Einfaches Vorschaubeispiel zum Hochladen eines Bildes. Chrome, Firefox und andere Browser können die Drag-and-Drop-Vorschau unterstützen.<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//--从 file 域获取 本地图片 url
function getFileUrl(sourceId) {
var url;
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
url = document.getElementById(sourceId).value;
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return url;
}
var ss=null
var ImgType=["gif", "jpeg", "jpg", "bmp", "png","ico"];
//--将本地图片 显示到浏览器上
function preImg(obj, targetId) {
ss=obj;
if (!RegExp("\.(" + ImgType.join("|") + ")$", "i").test(obj.value.toLowerCase())) {
alert("选择文件错误,图片类型必须是" + ImgType.join(","));
this.value = "";
return false
}
var sourceId=obj.id
var url = getFileUrl(sourceId);
var imgPre = document.getElementById(targetId);
imgPre.src = url;
}
</script>
</head>
<body>
<form action="">
<label style="position: relative;width:100px;height:100px;display: block;line-height:100px; " align="center">
<input type="file" accept="image/*" name="imgOne" id="imgOne" onchange="if(this.value){preImg(this, 'imgPre');}" style="height: 100%;width: 100%;position: absolute;z-index: 9;left: 0;right: 0;opacity: 0;"/>
<img id="imgPre" src="" style="display: block;position: absolute;width:100%;height:100%;border: 1px solid #999;"/>
上传图片
</label>
</form>
</body>
</html> Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln PHP chinesische Website! Verwandte Lektüre:
Detaillierte Erklärung der ng-bind-html-Direktive von angleJS
Warum machen die Front und Backends müssen separat geschrieben werden
Das obige ist der detaillierte Inhalt vonEinfache Bild-Upload-Funktion per Klick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
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
Vorheriger Artikel：Kann JS das getaggte Video-Thumbnail eines Videos erfassen?Nächster Artikel：Kann JS das getaggte Video-Thumbnail eines Videos erfassen?