suchen
HeimBackend-EntwicklungPHP-Tutorialjavascript - 商城网站是如何单击头像直接弹出可以上传图片然后预览?

javascript - 商城网站是如何单击头像直接弹出可以上传图片然后预览?

我现在没思路,不知道是怎么弄出来。

回复内容:

javascript - 商城网站是如何单击头像直接弹出可以上传图片然后预览?

我现在没思路,不知道是怎么弄出来。

推荐 百度 FEX 团队的 Web Uploader,最近使用了一下,感觉功能比较全,可以实现分片、并发上传,同时上传前就可以获取到图片的预览图(大小可自己定义,是Base64编码)。另外除了对HTML5 File API 的支持外,还提供了Flash插件实现对老版本浏览器的支持。有兴趣可以阅读下官网的示例。

做成透明度0,放在这个头像上,大小和这个头像一样

先写一个上传的input,然后隐藏掉,然后做一个按钮,或者div,给它onclick事件,当它被点击的时候去触发input,然后上传窗口就打开了。
预览功能是先把刚刚的图片传给服务器,然后拿到url,再用一个div来显示,就是预览了。如果这个时候要裁减什么的,就做完之后再传给服务器,把文件记录到数据库等等。
我自己的的做法是这样的。。

隐藏表单用ajax提交,不难。

正好做了一个,和题主这个想要的效果差不多,用到了File API,旧浏览器兼容不了,题主可以参考一下。

html

<div class="file-selector">
  <span class="icon-upload"></span>
  <div class="preview-container">
    <div class="remove-button js-remove-image">x</div>
    <img  class="js-preview" alt="javascript - 商城网站是如何单击头像直接弹出可以上传图片然后预览? " >
  </div>
  <input type="file" name="image" class="js-image">
</div>

css

.file-selector {
  position: relative;
  overflow: hidden;
  display: inline-block;

  width: 120px;
  height: 160px;
  border: 3px dashed #e7e7eb;
  margin-right: 20px;

  &:hover {
    border-color: #888;
    .am-icon-upload {
      color: #888;
    }
  }

  &.has-preview {
    border: 0;
    .am-icon-upload,
    input {
      display: none;
    }
  }

  .am-icon-upload {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 48px;
    color: #e7e7eb;
  }

  .preview-container {
    width: 100%;
    height: 100%;
    display: none;
    position: relative;
    
    img {
      width: 100%;
      height: 100%;
    }

    .remove-button {
      top: 0;
      right: 0;
    }
  }

  input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    font-size: 200px;
    direction: ltr;
    cursor: pointer;
  }
}

js

$('#js-image').on('change', function() {
  var $input = $(this);
  var $container = $input.closest('.file-selector');
  var $previewContainer = $container.find('.preview-container');
  var $previewImage = $previewContainer.find('.js-preview');
  var reader = new FileReader();

  reader.onload = function(e) {
    $previewImage.attr('src', e.target.result);
    $container.addClass('has-preview');
    $previewContainer.show();
    $previewContainer.find('.js-remove-image').on('click', function() {
      $input.val(null);
      $previewImage.attr('src', null);
      $container.removeClass('has-preview');
      $previewContainer.hide();
      $(this).off('click');
    });
  }

  reader.readAsDataURL(this.files[0]);
});

我只知道HTML 5有办法可以预览

html5 fileapi change处理就可以了
例子 http://www.cnblogs.com/snandy/archive/2012/11/26/2789350.html

如果需要兼容的话,可以尝试下jQuery File Upload这个插件

有好多种方法可以弄这个吧?js的onclick事件打开上传框,配合ajax上传到服务器然后再用ajax引入这张图片,妥妥的。

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
PHP und Python: Verschiedene Paradigmen erklärtPHP und Python: Verschiedene Paradigmen erklärtApr 18, 2025 am 12:26 AM

PHP ist hauptsächlich prozedurale Programmierung, unterstützt aber auch die objektorientierte Programmierung (OOP). Python unterstützt eine Vielzahl von Paradigmen, einschließlich OOP, funktionaler und prozeduraler Programmierung. PHP ist für die Webentwicklung geeignet, und Python eignet sich für eine Vielzahl von Anwendungen wie Datenanalyse und maschinelles Lernen.

PHP und Python: Ein tiefes Eintauchen in ihre GeschichtePHP und Python: Ein tiefes Eintauchen in ihre GeschichteApr 18, 2025 am 12:25 AM

PHP entstand 1994 und wurde von Rasmuslerdorf entwickelt. Es wurde ursprünglich verwendet, um Website-Besucher zu verfolgen und sich nach und nach zu einer serverseitigen Skriptsprache entwickelt und in der Webentwicklung häufig verwendet. Python wurde Ende der 1980er Jahre von Guidovan Rossum entwickelt und erstmals 1991 veröffentlicht. Es betont die Lesbarkeit und Einfachheit der Code und ist für wissenschaftliche Computer, Datenanalysen und andere Bereiche geeignet.

Wählen Sie zwischen PHP und Python: Ein LeitfadenWählen Sie zwischen PHP und Python: Ein LeitfadenApr 18, 2025 am 12:24 AM

PHP eignet sich für Webentwicklung und schnelles Prototyping, und Python eignet sich für Datenwissenschaft und maschinelles Lernen. 1.PHP wird für die dynamische Webentwicklung verwendet, mit einfacher Syntax und für schnelle Entwicklung geeignet. 2. Python hat eine kurze Syntax, ist für mehrere Felder geeignet und ein starkes Bibliotheksökosystem.

PHP und Frameworks: Modernisierung der SprachePHP und Frameworks: Modernisierung der SpracheApr 18, 2025 am 12:14 AM

PHP bleibt im Modernisierungsprozess wichtig, da es eine große Anzahl von Websites und Anwendungen unterstützt und sich den Entwicklungsbedürfnissen durch Frameworks anpasst. 1.PHP7 verbessert die Leistung und führt neue Funktionen ein. 2. Moderne Frameworks wie Laravel, Symfony und Codesigniter vereinfachen die Entwicklung und verbessern die Codequalität. 3.. Leistungsoptimierung und Best Practices verbessern die Anwendungseffizienz weiter.

Auswirkungen von PHP: Webentwicklung und darüber hinausAuswirkungen von PHP: Webentwicklung und darüber hinausApr 18, 2025 am 12:10 AM

PhPhas significantantyPactedWebDevelopmentAndendendsbeyondit.1) iTpowersMAjorPlatforms-LikewordpressandExcelsInDatabaseInteractions.2) php'SadaptabilityAllowStoscaleForLargeApplicationsfraMe-Linien-Linien-Linien-Linienkripte

Wie funktioniert der Php -Typ -Hinweis, einschließlich Skalartypen, Rückgabetypen, Gewerkschaftstypen und nullbaren Typen?Wie funktioniert der Php -Typ -Hinweis, einschließlich Skalartypen, Rückgabetypen, Gewerkschaftstypen und nullbaren Typen?Apr 17, 2025 am 12:25 AM

PHP -Typ -Eingabeaufforderungen zur Verbesserung der Codequalität und der Lesbarkeit. 1) Tipps zum Skalartyp: Da Php7.0 in den Funktionsparametern wie int, float usw. angegeben werden dürfen. 3) Eingabeaufforderung für Gewerkschaftstyp: Da Php8.0 in Funktionsparametern oder Rückgabetypen angegeben werden dürfen. 4) Nullierstyp Eingabeaufforderung: Ermöglicht die Einbeziehung von Nullwerten und Handlungsfunktionen, die Nullwerte zurückgeben können.

Wie handelt es sich bei PHP -Objektklonen (Klonschlüsselwort) und der __clone Magic -Methode?Wie handelt es sich bei PHP -Objektklonen (Klonschlüsselwort) und der __clone Magic -Methode?Apr 17, 2025 am 12:24 AM

Verwenden Sie in PHP das Klonschlüsselwort, um eine Kopie des Objekts zu erstellen und das Klonierungsverhalten über die \ _ \ _ Clone Magic -Methode anzupassen. 1. Verwenden Sie das Klonschlüsselwort, um eine flache Kopie zu erstellen und die Eigenschaften des Objekts, nicht die Eigenschaften des Objekts zu klonen. 2. Die \ _ \ _ Klonmethode kann verschachtelte Objekte tief kopieren, um flache Kopierprobleme zu vermeiden. 3. achten Sie darauf, dass kreisförmige Referenzen und Leistungsprobleme beim Klonen vermieden werden, und optimieren Sie die Klonierungsvorgänge, um die Effizienz zu verbessern.

PHP vs. Python: Anwendungsfälle und AnwendungenPHP vs. Python: Anwendungsfälle und AnwendungenApr 17, 2025 am 12:23 AM

PHP eignet sich für Webentwicklungs- und Content -Management -Systeme, und Python eignet sich für Datenwissenschafts-, maschinelles Lernen- und Automatisierungsskripte. 1.PHP hat eine gute Leistung beim Erstellen von schnellen und skalierbaren Websites und Anwendungen und wird üblicherweise in CMS wie WordPress verwendet. 2. Python hat sich in den Bereichen Datenwissenschaft und maschinelles Lernen mit reichen Bibliotheken wie Numpy und TensorFlow übertrifft.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.