使用ajax和sweet alert调用函数

Question

我不明白单击 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>

Answer 1

只需将模式放入一个函数中，然后在需要时调用它。此示例显示初始调用和 onclick 调用。const modal = async function () {const { value: file } = await Swal.fire({&nbsp; title: 'Select image',&nbsp; input: 'file',&nbsp; inputAttributes: {&nbsp; &nbsp; 'accept': 'image/*',&nbsp; &nbsp; 'aria-label': 'Upload your profile picture'&nbsp; }})if (file) {&nbsp; const reader = new FileReader()&nbsp; reader.onload = (e) => {&nbsp; &nbsp; Swal.fire({&nbsp; &nbsp; &nbsp; title: 'Your uploaded picture',&nbsp; &nbsp; &nbsp; imageUrl: e.target.result,&nbsp; &nbsp; &nbsp; imageAlt: 'The uploaded picture'&nbsp; &nbsp; })&nbsp; }&nbsp; reader.readAsDataURL(file)}};// initial modal callmodal();// 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 "&nbsp; id="demo">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Try me!&nbsp; &nbsp; &nbsp; &nbsp; </button>