时间戳

首页 > 解决方案 > 使用ajax和sweet alert调用函数

javascript - 使用ajax和sweet alert调用函数

问题描述

我不明白单击 btn 文本时如何调用此函数。唯一有效的方法是(async () => { 我尝试过这个$(document).ready(function() { $('#demo').submit(function(e) {但不起作用。

(async () => {

const { value: file } = await Swal.fire({
  title: 'Select image',
  input: 'file',
  inputAttributes: {
    'accept': 'image/*',
    'aria-label': 'Upload your profile picture'
  }
})

if (file) {
  const reader = new FileReader()
  reader.onload = (e) => {
    Swal.fire({
      title: 'Your uploaded picture',
      imageUrl: e.target.result,
      imageAlt: 'The uploaded picture'
    })
  }
  reader.readAsDataURL(file)
}

})()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<button class="form-control cal "  id="demo">
          Try me!
        </button>

标签： javascriptjquery

解决方案

只需将模式放入一个函数中，然后在需要时调用它。此示例显示初始调用和 onclick 调用。

const modal = async function () {

const { value: file } = await Swal.fire({
  title: 'Select image',
  input: 'file',
  inputAttributes: {
    'accept': 'image/*',
    'aria-label': 'Upload your profile picture'
  }
})

if (file) {
  const reader = new FileReader()
  reader.onload = (e) => {
    Swal.fire({
      title: 'Your uploaded picture',
      imageUrl: e.target.result,
      imageAlt: 'The uploaded picture'
    })
  }
  reader.readAsDataURL(file)
}

};

// initial modal call
modal();

// even modal call
$("#demo").click(modal);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<button class="form-control cal "  id="demo">
          Try me!
        </button>

推荐阅读