Web-Frontend
js-Tutorial
Implementierung der lokalen Vorschaufunktion zum Hochladen von Bildern basierend auf jquery_jquery
Implementierung der lokalen Vorschaufunktion zum Hochladen von Bildern basierend auf jquery_jquery
Wenn wir Dateien hochladen und sie jedes Mal auf den Server hochladen müssen, bevor wir sie in der Vorschau anzeigen können, erscheint das vernünftig, aber eigentlich unvernünftig. Wenn die Netzwerkgeschwindigkeit langsam ist oder es Probleme mit den Bildern gibt, ist dies nicht der Fall Verschwenden Sie Kundenzeit, aber auch Serverressourcen. Okay, im Folgenden stellen wir die lokale Vorschau beim Hochladen von Bildern mit js vor. Ich hoffe, dass diese Methode für Sie hilfreich ist.
1. Prinzip
ist in zwei Schritte unterteilt:
Wenn die Eingabe zum Hochladen eines Bildes ausgelöst wird und ein lokales Bild ausgewählt wird, erhalten Sie die URL des Objekts (Objekt-URL) des hochzuladenden Bildes
Weisen Sie die Objekt-URL dem src-Attribut des vorab geschriebenen img-Tags zu, um das Bild anzuzeigen.Hier müssen wir das File-Objekt, das Blob-Objekt und die Methode window.URL.createObjectURL() in Javascript verstehen.
1. Dateiobjekt
Das File-Objekt kann verwendet werden, um Informationen über eine Datei abzurufen und kann auch zum Lesen des Inhalts dieser Datei verwendet werden. Normalerweise ist das File-Objekt das FileList-Objekt, das zurückgegeben wird, nachdem der Benutzer eine Datei in einem Eingabeelement ausgewählt hat Es kann aus dem DataTransfer-Objekt stammen, das per Drag-and-Drop-Vorgang generiert wird.Sehen wir uns an, wie wir das FileList-Objekt erhalten:
<script type="text/javascript" src="jquery.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
// 获取FileList的第一个元素
alert(document.getelementbyid('upload').files[0]);
});
</script>
2. Blob-Objekt
Ein Blob-Objekt ist ein dateiähnliches Objekt, das schreibgeschützte Rohdaten enthält. Die Daten im Blob-Objekt müssen nicht unbedingt in der nativen Form in JavaScript vorliegen. Die Dateischnittstelle basiert auf Blob und erbt die Funktionen von Blob und erweitert die Unterstützung einer lokalen Datei auf dem Computer des Benutzers.Die Objekt-URL, die wir erhalten möchten, wird tatsächlich vom Blob-Objekt abgerufen, da die Dateischnittstelle Blob erbt. Konvertieren wir das Blob-Objekt in eine URL:
<script type="text/javascript">
var f = document.getelementbyid('upload').files[0];
var src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src;
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Upload</title>
<style type="text/css">
#destination{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);
}
</style>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>-->
<script type="text/javascript" src="http://localhost/jQuery/jquery.js"></script>
<script type="text/javascript">
//处理file input加载的图片文件
$(document).ready(function(e) {
//判断浏览器是否有FileReader接口
if(typeof FileReader =='undefined')
{
$("#destination").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口,无法使用图片本地预览,请更新浏览器获得最好体验');
//如果浏览器是ie
if($.browser.msie===true)
{
//ie6直接用file input的value值本地预览
if($.browser.version==6)
{
$("#imgUpload").change(function(event){
//ie6下怎么做图片格式判断?
var src = event.target.value;
//var src = document.selection.createRange().text; //选中后 selection对象就产生了 这个对象只适合ie
var img = '<img src="'+src+'" width="200px" height="200px" />';
$("#destination").empty().append(img);
});
}
//ie7,8使用滤镜本地预览
else if($.browser.version==7 || $.browser.version==8)
{
$("#imgUpload").change(function(event){
$(event.target).select();
var src = document.selection.createRange().text;
var dom = document.getElementById('destination');
//使用滤镜 成功率高
dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src;
dom.innerHTML = '';
//使用和ie6相同的方式 设置src为绝对路径的方式 有些图片无法显示 效果没有使用滤镜好
/*var img = '<img src="'+src+'" width="200px" height="200px" />';
$("#destination").empty().append(img);*/
});
}
}
//如果是不支持FileReader接口的低版本firefox 可以用getAsDataURL接口
else if($.browser.mozilla===true)
{
$("#imgUpload").change(function(event){
//firefox2.0没有event.target.files这个属性 就像ie6那样使用value值 但是firefox2.0不支持绝对路径嵌入图片 放弃firefox2.0
//firefox3.0开始具备event.target.files这个属性 并且开始支持getAsDataURL()这个接口 一直到firefox7.0结束 不过以后都可以用HTML5的FileReader接口了
if(event.target.files)
{
//console.log(event.target.files);
for(var i=0;i<event.target.files.length;i++)
{
var img = '<img src="'+event.target.files.item(i).getAsDataURL()+'" width="200px" height="200px"/>';
$("#destination").empty().append(img);
}
}
else
{
//console.log(event.target.value);
//$("#imgPreview").attr({'src':event.target.value});
}
});
}
}
else
{
// version 1
/*$("#imgUpload").change(function(e){
var file = e.target.files[0];
var fReader = new FileReader();
//console.log(fReader);
//console.log(file);
fReader.onload=(function(var_file)
{
return function(e)
{
$("#imgPreview").attr({'src':e.target.result,'alt':var_file.name});
}
})(file);
fReader.readAsDataURL(file);
});*/
//单图上传 version 2
/*$("#imgUpload").change(function(e){
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e){
//displayImage($('bd'),e.target.result);
//alert('load');
$("#imgPreview").attr({'src':e.target.result});
}
reader.readAsDataURL(file);
});*/
//多图上传 input file控件里指定multiple属性 e.target是dom类型
$("#imgUpload").change(function(e){
for(var i=0;i<e.target.files.length;i++)
{
var file = e.target.files.item(i);
//允许文件MIME类型 也可以在input标签中指定accept属性
//console.log(/^image/.*$/i.test(file.type));
if(!(/^image/.*$/i.test(file.type)))
{
continue; //不是图片 就跳出这一次循环
}
//实例化FileReader API
var freader = new FileReader();
freader.readAsDataURL(file);
freader.onload=function(e)
{
var img = '<img src="'+e.target.result+'" width="200px" height="200px"/>';
$("#destination").empty().append(img);
}
}
});
//处理图片拖拽的代码
var destDom = document.getElementById('destination');
destDom.addEventListener('dragover',function(event){
event.stopPropagation();
event.preventDefault();
},false);
destDom.addEventListener('drop',function(event){
event.stopPropagation();
event.preventDefault();
var img_file = event.dataTransfer.files.item(0); //获取拖拽过来的文件信息 暂时取一个
//console.log(event.dataTransfer.files.item(0).type);
if(!(/^image/.*$/.test(img_file.type)))
{
alert('您还未拖拽任何图片过来,或者您拖拽的不是图片文件');
return false;
}
fReader = new FileReader();
fReader.readAsDataURL(img_file);
fReader.onload = function(event){
destDom.innerHTML='';
destDom.innerHTML = '<img src="'+event.target.result+'" width="200px" height="200px"/>';
};
},false);
}
});
</script>
</head>
<body>
<input type="file" id="imgUpload" name="imgUpload" draggable="true" single/> <!--允许file控件接受的文件类型-->
<!--<input type="file" id="imgUpload" name="imgUpload" accept="image/*" multiple/>-->
<div id="destination" style="width:200px;height:200px;border:1px solid #000000;"><img src="nopic.jpg" /></div>
</body>
</html>
2. Kompatibilität
- •Die obige Methode ist für den Chrome-Browser geeignet
- •Wenn es sich um einen IE-Browser handelt, können Sie anstelle von src direkt den Eingabewert verwenden
- • Beim Anzeigen von Informationen online können Sie die Methode getAsDataURL() des File-Objekts direkt verwenden, um die URL abzurufen. Zu den ähnlichen Methoden gehören getAsText() und getAsBinary(). ;
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1390
52
Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung
Feb 27, 2024 pm 06:45 PM
Detaillierte Erläuterung der jQuery-Referenzmethode: Kurzanleitung jQuery ist eine beliebte JavaScript-Bibliothek, die häufig in der Website-Entwicklung verwendet wird. Sie vereinfacht die JavaScript-Programmierung und bietet Entwicklern umfangreiche Funktionen und Features. In diesem Artikel wird die Referenzmethode von jQuery ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern einen schnellen Einstieg zu erleichtern. Einführung in jQuery Zuerst müssen wir die jQuery-Bibliothek in die HTML-Datei einführen. Es kann über einen CDN-Link eingeführt oder heruntergeladen werden
Wie verwende ich die PUT-Anfragemethode in jQuery?
Feb 28, 2024 pm 03:12 PM
Wie verwende ich die PUT-Anfragemethode in jQuery? In jQuery ähnelt die Methode zum Senden einer PUT-Anfrage dem Senden anderer Arten von Anfragen, Sie müssen jedoch auf einige Details und Parametereinstellungen achten. PUT-Anfragen werden normalerweise zum Aktualisieren von Ressourcen verwendet, beispielsweise zum Aktualisieren von Daten in einer Datenbank oder zum Aktualisieren von Dateien auf dem Server. Das Folgende ist ein spezifisches Codebeispiel, das die PUT-Anforderungsmethode in jQuery verwendet. Stellen Sie zunächst sicher, dass Sie die jQuery-Bibliotheksdatei einschließen. Anschließend können Sie eine PUT-Anfrage senden über: $.ajax({u
Wie entferne ich das Höhenattribut eines Elements mit jQuery?
Feb 28, 2024 am 08:39 AM
Wie entferne ich das Höhenattribut eines Elements mit jQuery? Bei der Front-End-Entwicklung müssen wir häufig die Höhenattribute von Elementen manipulieren. Manchmal müssen wir möglicherweise die Höhe eines Elements dynamisch ändern, und manchmal müssen wir das Höhenattribut eines Elements entfernen. In diesem Artikel wird erläutert, wie Sie mit jQuery das Höhenattribut eines Elements entfernen, und es werden spezifische Codebeispiele bereitgestellt. Bevor wir jQuery zum Betreiben des Höhenattributs verwenden, müssen wir zunächst das Höhenattribut in CSS verstehen. Das Höhenattribut wird verwendet, um die Höhe eines Elements festzulegen
jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite
Feb 28, 2024 pm 09:06 PM
Titel: jQuery-Tipps: Ändern Sie schnell den Text aller Tags auf der Seite. In der Webentwicklung müssen wir häufig Elemente auf der Seite ändern und bedienen. Wenn Sie jQuery verwenden, müssen Sie manchmal den Textinhalt aller a-Tags auf der Seite gleichzeitig ändern, was Zeit und Energie sparen kann. Im Folgenden wird erläutert, wie Sie mit jQuery den Text aller Tags auf der Seite schnell ändern können, und es werden spezifische Codebeispiele angegeben. Zuerst müssen wir die jQuery-Bibliotheksdatei einführen und sicherstellen, dass der folgende Code in die Seite eingefügt wird: <
Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern
Feb 28, 2024 pm 05:42 PM
Titel: Verwenden Sie jQuery, um den Textinhalt aller Tags zu ändern. jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur Verarbeitung von DOM-Operationen verwendet wird. Bei der Webentwicklung müssen wir häufig den Textinhalt des Link-Tags (eines Tags) auf der Seite ändern. In diesem Artikel wird erläutert, wie Sie mit jQuery dieses Ziel erreichen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die jQuery-Bibliothek in die Seite einführen. Fügen Sie den folgenden Code in die HTML-Datei ein:
Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery
Feb 28, 2024 pm 01:15 PM
jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur DOM-Manipulation und Ereignisbehandlung in Webseiten verwendet wird. In jQuery wird die Methode eq() verwendet, um Elemente an einer bestimmten Indexposition auszuwählen. Die spezifischen Verwendungs- und Anwendungsszenarien sind wie folgt. In jQuery wählt die Methode eq() das Element an einer angegebenen Indexposition aus. Indexpositionen beginnen bei 0 zu zählen, d. h. der Index des ersten Elements ist 0, der Index des zweiten Elements ist 1 und so weiter. Die Syntax der eq()-Methode lautet wie folgt: $("s
Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat?
Feb 29, 2024 am 09:03 AM
Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Wenn Sie jQuery zum Betreiben von DOM-Elementen verwenden, stoßen Sie häufig auf Situationen, in denen Sie feststellen müssen, ob ein Element ein bestimmtes Attribut hat. In diesem Fall können wir diese Funktion einfach mit Hilfe der von jQuery bereitgestellten Methoden implementieren. Im Folgenden werden zwei häufig verwendete Methoden vorgestellt, um festzustellen, ob ein jQuery-Element über bestimmte Attribute verfügt, und um spezifische Codebeispiele anzuhängen. Methode 1: Verwenden Sie die Methode attr() und den Operator typeof //, um zu bestimmen, ob das Element ein bestimmtes Attribut hat
Einführung in das Hinzufügen neuer Zeilen zu einer Tabelle mit jQuery
Feb 29, 2024 am 08:12 AM
jQuery ist eine beliebte JavaScript-Bibliothek, die häufig in der Webentwicklung verwendet wird. Während der Webentwicklung ist es häufig erforderlich, mithilfe von JavaScript dynamisch neue Zeilen zu Tabellen hinzuzufügen. In diesem Artikel wird erläutert, wie Sie mit jQuery neue Zeilen zu einer Tabelle hinzufügen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die jQuery-Bibliothek in die HTML-Seite einführen. Die jQuery-Bibliothek kann über den folgenden Code in das Tag eingeführt werden:
