Heim > Artikel > Web-Frontend > HTML5-Implementierung des hochgeladenen Bildvorschau-Effektcodes

HTML5-Implementierung des hochgeladenen Bildvorschau-Effektcodes

零下一度Original: 2017-04-22 10:04:542616Durchsuche

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 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 vonHTML5-Implementierung des hochgeladenen Bildvorschau-Effektcodes. 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：Teilen Sie mehrere coole Bildeffekte, die in HTML5 implementiert sindNächster Artikel：Teilen Sie mehrere coole Bildeffekte, die in HTML5 implementiert sind

In Verbindung stehende Artikel

Mehr sehen