What steps are needed to determine the type and size of uploaded images?-JS Tutorial-php.cn

What steps are needed to determine the type and size of uploaded images?

php中世界最好的语言

Release： 2018-04-28 15:13:11

Original

1875 people have browsed it

This time I will bring you the steps required to determine the type and size of uploaded pictures , and what are the precautions for judging the type and size of uploaded pictures. The following is a practical case, let's take a look together. take a look. z

Here we use jQuery to determine the type and size of the uploaded image:

<!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>

Copy after login

lastIndexOf()The method retrieves the specified number from back to front String , if the specified character appears, return the position of the character, if not, return -1, the position starts counting from 0

toUpperCase()Method conversion into uppercase letters

substring() method intercepts the string, the first parameter is the starting position, the second parameter is the ending position (if omitted, the character will be intercepted by default end of the string), unlike the slice() and substr() methods, substring() does not accept negative parameters

The slice() method is the same as the substring() method, the difference is that it accepts negative parameters (if the parameter is a negative number, the position is calculated from the end of the string)

substr() method intercepts a string. The first parameter is the starting position, and the second parameter is the intercepted length (different from slice and substring). It is no longer recommended to use

Believe it After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!