Rumah hujung hadapan web html tutorial jquery实现上传文件大小类型的验证例子

jquery实现上传文件大小类型的验证例子

Nov 29, 2017 am 09:54 AM
jquery saiz dokumen

文件上传在网站中很长被用到而用jQuery来做上传给用户的体验又更好点,这章就来讲讲jQuery实现上传,并且验证文件大小的例子,想学习jQuery的同学可以看看!

直接上代码咯:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="jquery1.8/jquery-1.8.0.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#myFile").change(function () {
        var filepath = $("input[name=&#39;myFile&#39;]").val();
        var extStart = filepath.lastIndexOf(".");
        var ext = filepath.substring(extStart, filepath.length).toUpperCase();
        if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
          alert("图片限于bmp,png,gif,jpeg,jpg格式");
          $("#fileType").text("")
          $("#fileSize").text("");
          return false;
        } else { $("#fileType").text(ext) }
        var file_size = 0;
        if ($.browser.msie) {
          var img = new Image();
          img.src = filepath;
          while (true) {
            if (img.fileSize > 0) {
              if (img.fileSize > 3 * 1024 * 1024) {
                alert("图片不大于100MB。");
              } else {
                var num03 = img.fileSize / 1024;
                num04 = num03.toFixed(2)
                $("#fileSize").text(num04 + "KB");
              }
              break;
            }
          }
        } else {
          file_size = this.files[0].size;
          var size = file_size / 1024;
          if (size > 10240) {
            alert("上传的图片大小不能超过10M!");
          } else {
            var num01 = file_size / 1024;
            num02 = num01.toFixed(2);
            $("#fileSize").text(num02 + " KB");
          }
        }
        return true;
      });
    });
  </script>
  <title>无标题文档</title>
</head>
<body>
  <table width="500" cellspacing="0" cellpadding="0">
    <tr>
      <td width="72" id="fileType">
      </td>
      <td width="242">
        <input type="file" name="myFile" id="myFile" />
      </td>
      <td width="184" id="fileSize" class="fileSize">
      </td>
    </tr>
  </table>
</body>
</html>
Salin selepas log masuk

以上就是jquery实现上传文件大小类型的验证例子,还在学习jQuery的同学可以研究研究。

相关推荐:

jQuery文件上传插件Uploadify使用指南_jquery

JQuery上传插件Uploadify使用详解

php简单实现批量上传图片的方法 android 批量上传图片 jquery上传图片插件 上传图片

Atas ialah kandungan terperinci jquery实现上传文件大小类型的验证例子. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk memindahkan fail dari Cakera Awan Quark ke Cakera Awan Baidu? Bagaimana untuk memindahkan fail dari Cakera Awan Quark ke Cakera Awan Baidu? Mar 14, 2024 pm 02:07 PM

Quark Netdisk dan Baidu Netdisk pada masa ini merupakan perisian Netdisk yang paling biasa digunakan untuk menyimpan fail Jika anda ingin menyimpan fail dalam Quark Netdisk ke Baidu Netdisk, bagaimana anda melakukannya? Dalam isu ini, editor telah menyusun langkah tutorial untuk memindahkan fail dari komputer Quark Network Disk ke Baidu Network Disk Mari kita lihat cara mengendalikannya. Bagaimana untuk menyimpan fail dari Cakera Rangkaian Quark ke Cakera Rangkaian Baidu? Untuk memindahkan fail daripada Cakera Rangkaian Quark ke Cakera Rangkaian Baidu, anda perlu memuat turun fail yang diperlukan terlebih dahulu daripada Cakera Rangkaian Quark, kemudian pilih folder sasaran dalam klien Cakera Rangkaian Baidu dan bukanya. Kemudian, seret dan lepaskan fail yang dimuat turun daripada Cakera Awan Quark ke dalam folder yang dibuka oleh klien Cakera Awan Baidu, atau gunakan fungsi muat naik untuk menambah fail pada Cakera Awan Baidu. Pastikan anda menyemak sama ada fail telah berjaya dipindahkan dalam Cakera Awan Baidu selepas muat naik selesai. Itu sahaja

Apa yang perlu dilakukan jika kod ralat 0x80004005 muncul Editor akan mengajar anda cara menyelesaikan kod ralat 0x80004005. Apa yang perlu dilakukan jika kod ralat 0x80004005 muncul Editor akan mengajar anda cara menyelesaikan kod ralat 0x80004005. Mar 21, 2024 pm 09:17 PM

Apabila memadam atau menyahmampat folder pada komputer anda, kadangkala kotak dialog segera "Ralat 0x80004005: Ralat Tidak Ditentukan" akan muncul Bagaimana anda harus menyelesaikan situasi ini? Sebenarnya terdapat banyak sebab mengapa kod ralat 0x80004005 digesa, tetapi kebanyakannya disebabkan oleh virus. Kami boleh mendaftarkan semula dll untuk menyelesaikan masalah tersebut . Sesetengah pengguna digesa dengan kod ralat 0X80004005 apabila menggunakan komputer mereka Ralat 0x80004005 disebabkan terutamanya oleh komputer tidak mendaftarkan fail perpustakaan pautan dinamik tertentu dengan betul, atau oleh tembok api yang tidak membenarkan sambungan HTTPS antara komputer dan Internet. Jadi bagaimana pula

Apakah fail hiberfil.sys? Bolehkah hiberfil.sys dipadamkan? Apakah fail hiberfil.sys? Bolehkah hiberfil.sys dipadamkan? Mar 15, 2024 am 09:49 AM

Baru-baru ini, ramai netizen bertanya kepada editor, apakah itu fail hiberfil.sys? Bolehkah hiberfil.sys mengambil banyak ruang pemacu C dan dipadamkan? Editor boleh memberitahu anda bahawa fail hiberfil.sys boleh dipadamkan. Mari kita lihat butiran di bawah. hiberfil.sys ialah fail tersembunyi dalam sistem Windows dan juga fail hibernasi sistem. Ia biasanya disimpan dalam direktori akar pemacu C, dan saiznya bersamaan dengan saiz memori yang dipasang sistem. Fail ini digunakan apabila komputer sedang hibernasi dan mengandungi data memori sistem semasa supaya ia boleh dipulihkan dengan cepat kepada keadaan sebelumnya semasa pemulihan. Oleh kerana saiznya adalah sama dengan kapasiti memori, ia mungkin mengambil jumlah ruang cakera keras yang lebih besar. hiber

Bagaimana untuk meningkatkan saiz cakera dalam VirtualBox [Panduan] Bagaimana untuk meningkatkan saiz cakera dalam VirtualBox [Panduan] Mar 17, 2024 am 10:10 AM

Kami sering menghadapi situasi di mana saiz cakera yang telah ditetapkan tidak mempunyai ruang untuk lebih banyak data? Jika anda memerlukan lebih banyak ruang cakera keras mesin maya pada peringkat seterusnya, anda mesti mengembangkan cakera keras maya dan sekatan. Dalam siaran ini, kita akan melihat bagaimana untuk meningkatkan saiz cakera dalam VirtualBox. Meningkatkan saiz cakera dalam VirtualBox Adalah penting untuk ambil perhatian bahawa anda mungkin ingin menyandarkan fail cakera keras maya anda sebelum melakukan operasi ini, kerana sentiasa ada kemungkinan berlaku masalah. Ia sentiasa menjadi amalan yang baik untuk mempunyai sandaran. Walau bagaimanapun, proses ini biasanya berfungsi dengan baik, cuma pastikan untuk mematikan mesin anda sebelum meneruskan. Terdapat dua cara untuk meningkatkan saiz cakera dalam VirtualBox. Kembangkan saiz cakera VirtualBox menggunakan GUI menggunakan CL

Penjelasan terperinci tentang arahan melihat log dalam sistem Linux! Penjelasan terperinci tentang arahan melihat log dalam sistem Linux! Mar 06, 2024 pm 03:55 PM

Dalam sistem Linux, anda boleh menggunakan arahan berikut untuk melihat kandungan fail log: perintah ekor: Perintah ekor digunakan untuk memaparkan kandungan pada akhir fail log. Ia adalah arahan biasa untuk melihat maklumat log terkini. ekor [pilihan] [nama fail] Pilihan yang biasa digunakan termasuk: -n: Tentukan bilangan baris yang akan dipaparkan, lalai ialah 10 baris. -f: Pantau kandungan fail dalam masa nyata dan secara automatik memaparkan kandungan baharu apabila fail dikemas kini. Contoh: tail-n20logfile.txt#Paparkan 20 baris terakhir fail logfile.txt tail-flogfile.txt#Pantau kandungan kemas kini fail logfile.txt dalam arahan kepala masa nyata: Perintah kepala digunakan untuk memaparkan permulaan daripada fail log

Penjelasan terperinci tentang peranan fail .ibd dalam MySQL dan langkah berjaga-jaga yang berkaitan Penjelasan terperinci tentang peranan fail .ibd dalam MySQL dan langkah berjaga-jaga yang berkaitan Mar 15, 2024 am 08:00 AM

Penjelasan terperinci tentang peranan fail .ibd dalam MySQL dan langkah berjaga-jaga yang berkaitan MySQL ialah sistem pengurusan pangkalan data hubungan yang popular, dan data dalam pangkalan data disimpan dalam fail yang berbeza. Antaranya, fail .ibd ialah fail data dalam enjin storan InnoDB, digunakan untuk menyimpan data dan indeks dalam jadual. Artikel ini akan menyediakan analisis terperinci tentang peranan fail .ibd dalam MySQL dan menyediakan contoh kod yang berkaitan untuk membantu pembaca memahami dengan lebih baik. 1. Peranan fail .ibd: menyimpan data: fail .ibd ialah storan InnoDB

Cipta dan jalankan fail '.a' Linux Cipta dan jalankan fail '.a' Linux Mar 20, 2024 pm 04:46 PM

Bekerja dengan fail dalam sistem pengendalian Linux memerlukan penggunaan pelbagai arahan dan teknik yang membolehkan pembangun mencipta dan melaksanakan fail, kod, program, skrip dan perkara lain dengan cekap. Dalam persekitaran Linux, fail dengan sambungan ".a" mempunyai kepentingan yang besar sebagai perpustakaan statik. Perpustakaan ini memainkan peranan penting dalam pembangunan perisian, membolehkan pembangun mengurus dan berkongsi fungsi biasa dengan cekap merentas berbilang program. Untuk pembangunan perisian yang berkesan dalam persekitaran Linux, adalah penting untuk memahami cara mencipta dan menjalankan fail ".a". Artikel ini akan memperkenalkan cara memasang dan mengkonfigurasi fail ".a" Linux secara menyeluruh Mari kita terokai definisi, tujuan, struktur dan kaedah mencipta dan melaksanakan fail ".a" Linux. Apa itu L

Petua jQuery: Cepat ubah suai teks semua teg pada halaman Petua jQuery: Cepat ubah suai teks semua teg pada halaman Feb 28, 2024 pm 09:06 PM

Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: &lt

See all articles