웹 프론트엔드 HTML 튜토리얼 업로드된 파일 크기 유형의 검증 예를 jQuery로 구현

업로드된 파일 크기 유형의 검증 예를 jQuery로 구현

Nov 29, 2017 am 09:54 AM
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>
로그인 후 복사
위는 업로드된 파일 크기 유형에 대한 jquery의 검증 예입니다. 아직 jQuery를 배우고 있는 학생들도 공부할 수 있습니다. Q 관련 추천 : ujquery 파일 업로드 플러그인 UPLOADIFY 사용 지침 사진 업로드를 위한 사진 플러그인 업로드

위 내용은 업로드된 파일 크기 유형의 검증 예를 jQuery로 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

0x80004005 오류 코드가 나타나는 경우 수행할 작업 편집기에서 0x80004005 오류 코드를 해결하는 방법을 알려줍니다. 0x80004005 오류 코드가 나타나는 경우 수행할 작업 편집기에서 0x80004005 오류 코드를 해결하는 방법을 알려줍니다. Mar 21, 2024 pm 09:17 PM

컴퓨터에서 폴더를 삭제하거나 압축을 풀 때 "오류 0x80004005: 지정되지 않은 오류"라는 프롬프트 대화 상자가 나타나는 경우가 있습니다. 이러한 상황이 발생하면 어떻게 해야 합니까? 실제로 오류 코드 0x80004005가 나타나는 데에는 여러 가지 이유가 있지만 대부분은 바이러스로 인해 발생합니다. 문제를 해결하기 위해 dll을 다시 등록할 수 있습니다. 아래에서는 편집기에서 0x80004005 오류 코드를 처리한 경험을 설명합니다. . 일부 사용자는 컴퓨터를 사용할 때 오류 코드 0X80004005가 표시됩니다. 0x80004005 오류는 주로 컴퓨터가 특정 동적 링크 라이브러리 파일을 올바르게 등록하지 않거나 컴퓨터와 인터넷 간의 HTTPS 연결을 허용하지 않는 방화벽으로 인해 발생합니다. 그렇다면 어떨까요?

Quark Cloud Disk에서 Baidu Cloud Disk로 파일을 전송하는 방법은 무엇입니까? Quark Cloud Disk에서 Baidu Cloud Disk로 파일을 전송하는 방법은 무엇입니까? Mar 14, 2024 pm 02:07 PM

Quark Netdisk와 Baidu Netdisk는 현재 파일 저장에 가장 일반적으로 사용되는 Netdisk 소프트웨어입니다. Quark Netdisk의 파일을 Baidu Netdisk에 저장하려면 어떻게 해야 합니까? 이번 호에서는 편집자가 Quark Network Disk 컴퓨터에서 Baidu Network Disk로 파일을 전송하는 방법에 대한 튜토리얼 단계를 정리했습니다. Quark 네트워크 디스크 파일을 Baidu 네트워크 디스크에 저장하는 방법은 무엇입니까? Quark Network Disk에서 Baidu Network Disk로 파일을 전송하려면 먼저 Quark Network Disk에서 필요한 파일을 다운로드한 다음 Baidu Network Disk 클라이언트에서 대상 폴더를 선택하고 열어야 합니다. 그런 다음 Quark Cloud Disk에서 다운로드한 파일을 Baidu Cloud Disk 클라이언트가 연 폴더에 끌어서 놓거나 업로드 기능을 사용하여 Baidu Cloud Disk에 파일을 추가합니다. 업로드가 완료된 후 파일이 Baidu Cloud Disk에 성공적으로 전송되었는지 확인하세요. 그게 다야

hiberfil.sys 파일이란 무엇입니까? hiberfil.sys를 삭제할 수 있나요? hiberfil.sys 파일이란 무엇입니까? hiberfil.sys를 삭제할 수 있나요? Mar 15, 2024 am 09:49 AM

최근 많은 네티즌들이 편집자에게 hiberfil.sys 파일이 무엇인지 문의했습니다. hiberfil.sys가 C 드라이브 공간을 많이 차지하고 삭제될 수 있나요? 편집자는 hiberfil.sys 파일을 삭제할 수 있음을 알려줄 수 있습니다. 아래에서 자세한 내용을 살펴보겠습니다. hiberfil.sys는 Windows 시스템의 숨겨진 파일이자 시스템 최대 절전 모드 파일입니다. 일반적으로 C 드라이브의 루트 디렉터리에 저장되며 크기는 시스템에 설치된 메모리 크기와 동일합니다. 이 파일은 컴퓨터가 최대 절전 모드일 때 사용되며, 복구 시 빠르게 이전 상태로 복원할 수 있도록 현재 시스템의 메모리 데이터를 담고 있습니다. 크기가 메모리 용량과 동일하므로 하드 드라이브 공간을 더 많이 차지할 수 있습니다. 동면

VirtualBox에서 디스크 크기를 늘리는 방법 [가이드] VirtualBox에서 디스크 크기를 늘리는 방법 [가이드] Mar 17, 2024 am 10:10 AM

사전 정의된 디스크 크기에 더 많은 데이터를 저장할 공간이 없는 상황이 자주 발생합니까? 이후 단계에서 더 많은 가상 컴퓨터 하드 디스크 공간이 필요한 경우 가상 하드 디스크와 파티션을 확장해야 합니다. 이번 포스팅에서는 VirtualBox에서 디스크 크기를 늘리는 방법에 대해 알아 보겠습니다. VirtualBox에서 디스크 크기 늘리기 항상 문제가 발생할 가능성이 있으므로 이러한 작업을 수행하기 전에 가상 하드 디스크 파일을 백업하는 것이 중요합니다. 항상 백업을 해 두는 것이 좋습니다. 그러나 프로세스는 일반적으로 잘 작동하므로 계속하기 전에 컴퓨터를 종료했는지 확인하십시오. VirtualBox에서 디스크 크기를 늘리는 방법에는 두 가지가 있습니다. CL을 사용하여 GUI를 사용하여 VirtualBox 디스크 크기 확장

MySQL에서 .ibd 파일의 역할과 관련 주의사항에 대한 자세한 설명 MySQL에서 .ibd 파일의 역할과 관련 주의사항에 대한 자세한 설명 Mar 15, 2024 am 08:00 AM

MySQL에서 .ibd 파일의 역할 및 관련 주의사항에 대한 자세한 설명 MySQL은 널리 사용되는 관계형 데이터베이스 관리 시스템이며 데이터베이스의 데이터는 서로 다른 파일에 저장됩니다. 그 중 .ibd 파일은 InnoDB 스토리지 엔진의 데이터 파일로, 테이블에 데이터와 인덱스를 저장하는 데 사용됩니다. 이 기사에서는 MySQL에서 .ibd 파일의 역할에 대한 자세한 분석을 제공하고 관련 코드 예제를 제공하여 독자의 이해를 돕습니다. 1. .ibd 파일의 역할: 데이터 저장: .ibd 파일은 InnoDB 저장소입니다.

Linux 시스템의 로그 보기 명령어에 대한 자세한 설명! Linux 시스템의 로그 보기 명령어에 대한 자세한 설명! Mar 06, 2024 pm 03:55 PM

Linux 시스템에서는 다음 명령을 사용하여 로그 파일의 내용을 볼 수 있습니다. tail 명령: tail 명령은 로그 파일 끝에 내용을 표시하는 데 사용됩니다. 최신 로그 정보를 보기 위한 일반적인 명령어입니다. tail [옵션] [파일 이름] 일반적으로 사용되는 옵션은 다음과 같습니다. -n: 표시할 줄 수를 지정합니다. 기본값은 10줄입니다. -f: 파일 내용을 실시간으로 모니터링하고, 파일이 업데이트되면 자동으로 새 내용을 표시합니다. 예: tail-n20logfile.txt#logfile.txt 파일의 마지막 20줄 표시 tail-flogfile.txt#logfile.txt 파일의 업데이트된 내용을 실시간으로 모니터링 head 명령: head 명령은 시작 부분을 표시하는 데 사용됩니다. 로그 파일의

Linux '.a' 파일 생성 및 실행 Linux '.a' 파일 생성 및 실행 Mar 20, 2024 pm 04:46 PM

Linux 운영 체제에서 파일을 작업하려면 개발자가 파일, 코드, 프로그램, 스크립트 및 기타 항목을 효율적으로 생성하고 실행할 수 있도록 하는 다양한 명령과 기술을 사용해야 합니다. Linux 환경에서는 확장자가 ".a"인 파일이 정적 라이브러리로서 매우 중요합니다. 이러한 라이브러리는 소프트웨어 개발에서 중요한 역할을 수행하므로 개발자는 여러 프로그램에서 공통 기능을 효율적으로 관리하고 공유할 수 있습니다. Linux 환경에서 효과적인 소프트웨어 개발을 위해서는 ".a" 파일을 생성하고 실행하는 방법을 이해하는 것이 중요합니다. 이번 글에서는 리눅스 ".a" 파일을 포괄적으로 설치하고 구성하는 방법을 소개한다. 리눅스 ".a" 파일의 정의, 목적, 구조, 생성 및 실행 방법을 살펴보자. L은 무엇입니까?

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. &lt

See all articles