>웹 프론트엔드 >JS 튜토리얼 >업로드된 이미지의 유형과 크기를 결정하려면 어떤 단계가 필요합니까?

업로드된 이미지의 유형과 크기를 결정하려면 어떤 단계가 필요합니까?

php中世界最好的语言
php中世界最好的语言원래의
2018-04-28 15:13:111885검색

이번에는 업로드된 이미지의 유형과 크기를 결정하는 데 필요한 단계와 업로드된 이미지의 유형과 크기를 결정하는 데 필요한 주의 사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다. z

여기에서는 jQuery를 사용하여 업로드된 이미지의 유형과 크기를 결정합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="" method="">
  <input type="file" id="file" />
</form>
<p id="p_1">图片格式为:</p>
<p id="p_2">图片大小为:</p>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
  var p_1 = $('#p_1'),
    p_2 = $('#p_2');
  $('body').on('change','#file',function(){
    var path = $(this).val(),
    extStart = path.lastIndexOf('.'),
    ext = path.substring(extStart,path.length).toUpperCase();
    //判断图片格式
    if(ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF'){
      alert('请上传正确格式的图片');
      resetFile();
      return false;
    }else{
      p_1.html('图片格式为:' + ext);
    }
    //获取图片大小,注意使用this,而不是$(this)
    var size = this.files[0].size / 1024;
    if(size > 10240){
      alert('图片大小不能超过10M');
      resetFile();
      return false;
    }else{
      p_2.html('图片大小为:' + size.toFixed(2) + 'KB');
    }
  })
  //还原
  function resetFile(){
    //清空file表单的值,不能直接使用$('#file').val('')这种写法
    $('form').html('<input type="file" id="file" />');
    p_1.html('图片格式为:');
    p_2.html('图片大小为:');
  }
})
</script>
</body>
</html>

lastIndexOf() 메서드는 지정된 String lastIndexOf()方法从后向前检索指定字符串,如果出现了指定的字符,则返回该字符所在的位置,如果没有,返回-1,位置从0开始计数

toUpperCase()方法转换成大写字母

substring()方法截取字符串,第一个参数为开始的位置,第二个参数为结束的位置(如果省略,则默认会截取到字符串的结尾),与slice()substr()方法不同的是,substring()不接受负的参数

slice()方法同substring()方法,区别是接受负的参数(若参数为负数,则从字符串尾部开始计算位置)

substr(), 지정된 문자가 나타나면 문자의 위치를 ​​반환하고, 없으면 -1을 반환하면 위치는 0

부터 계산되기 시작합니다. toUpperCase () 메소드는 대문자로 변환합니다.

substring() 메소드는 문자열을 가로채는데 첫 번째 매개변수는 시작 위치이고 두 번째 매개변수는 끝 위치입니다(만약 생략하면 기본적으로 문자열의 끝이 차단됩니다. slice()substr() 메서드와 달리 substring()는 음수 값을 허용하지 않습니다.

slice() 메서드는 substring() 메서드와 동일하지만 음수 매개 변수( 매개변수가 음수이면 문자열 끝부터 위치를 계산합니다. substr() 메서드는 문자열을 가로채는 첫 번째 매개변수가 시작 위치이고 두 번째 매개변수는 가로채는 길이(슬라이스 및 하위 문자열과 다름) 더 이상 사용하지 않는 것이 좋습니다

믿거나 말거나 이 기사의 사례를 읽은 후 해당 방법을 마스터한 후 더 흥미로운 정보를 보려면 다른 관련 항목에 주의하세요. PHP 중국어 웹사이트의 기사!

추천 자료:

Koa 프로젝트 구성 단계에 대한 자세한 설명🎜🎜🎜🎜🎜angular6.0은 컴포넌트 지연 로딩 기능을 구현합니다(코드 포함)🎜🎜🎜

위 내용은 업로드된 이미지의 유형과 크기를 결정하려면 어떤 단계가 필요합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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