Verwenden Sie JS+HTML5, um einen Bild-Upload-Vorschaueffekt zu erzielen (Beispiel)-H5-Tutorial-php.cn

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

怪我咯

Freigeben： 2017-04-30 10:45:37

Original

2655 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 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>

Nach dem Login kopieren

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!