Heim > Artikel > Web-Frontend > Verwenden Sie JS+HTML5, um einen Bild-Upload-Vorschaueffekt zu erzielen (Beispiel)

Verwenden Sie JS+HTML5, um einen Bild-Upload-Vorschaueffekt zu erzielen (Beispiel)

怪我咯Original: 2017-04-30 10:45:372566Durchsuche

In diesem Artikel wird hauptsächlich JS+HTML5 vorgestellt, um den Vorschaueffekt hochgeladener Bilder zu realisieren. Er analysiert die spezifischen Betriebsschritte und zugehörigen Implementierungstechniken der lokalen Vorschau von mit Javascript hochgeladenen Bildern in Form eines vollständigen Beispiels it

Dieser Artikel beschreibt das Beispiel von JS+HTML5, um den Vorschaueffekt hochgeladener Bilder zu erzielen. Teilen Sie es allen als Referenz mit. Die Details lauten wie folgt:

Im Projekt bin ich auf einen Datei-Upload mit dem Eingabe-Tag-Dateityp gestoßen, und ich wollte vor dem Hochladen eine Vorschau des Bildes anzeigen Zuerst die Datei hochladen und dann die Absenderadresse auf der Seite anzeigen ist nicht gut, da die grundlegenden Informationen des Benutzers möglicherweise nicht gespeichert werden, der Avatar jedoch geändert wurde. Wenn er geändert werden muss, werden überflüssige Bilder angezeigt auf dem Server gespeichert.

Ich habe online eine Lösung wie folgt gefunden:

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title>html5 图片上传预览</title>
  <style>
    #preview {
      width: 300px;
      height: 300px;
      overflow: hidden;
    }
    #preview img {
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
    function preview1(file) {
      var img = new Image(), url = img.src = URL.createObjectURL(file)
      var $img = $(img)
      img.onload = function() {
        URL.revokeObjectURL(url)
        $(&#39;#preview&#39;).empty().append($img)
      }
    }
    function preview2(file) {
      var reader = new FileReader()
      reader.onload = function(e) {
        var $img = $(&#39;<img>&#39;).attr("src", e.target.result)
        $(&#39;#preview&#39;).empty().append($img)
      }
      reader.readAsDataURL(file)
    }
     
    $(function() {
      $(&#39;[type=file]&#39;).change(function(e) {
        var file = e.target.files[0]
        preview1(file)
      })
    })
  </script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
  <input type="file" name="imageUpload"/>
  <p id="preview" style="width: 300px;height:300px;border:1px solid gray;"></p>
</form>
</body>
</html>

Das obige ist der detaillierte Inhalt vonVerwenden Sie JS+HTML5, um einen Bild-Upload-Vorschaueffekt zu erzielen (Beispiel). 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：Detaillierte Erläuterung von HTML5 zur Implementierung der Funktion zum Aufnehmen und Hochladen von Fotos auf WeChatNächster Artikel：Detaillierte Erläuterung von HTML5 zur Implementierung der Funktion zum Aufnehmen und Hochladen von Fotos auf WeChat

In Verbindung stehende Artikel

Mehr sehen