HTML5-Implementierung des hochgeladenen Bildvorschau-Effektcodes-H5-Tutorial-php.cn

HTML5-Implementierung des hochgeladenen Bildvorschau-Effektcodes

零下一度

Freigeben： 2017-04-22 10:04:54

Original

2677 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!