Heim > Web-Frontend > js-Tutorial > Ausführliche Erklärung, wie jQuery die Art und Größe der hochgeladenen Bilder bestimmt

Ausführliche Erklärung, wie jQuery die Art und Größe der hochgeladenen Bilder bestimmt

php中世界最好的语言
Freigeben: 2018-04-23 11:16:43
Original
2383 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen ausführlich die jQuery-Methode zur Beurteilung der Art und Größe hochgeladener Bilder. Welche Vorsichtsmaßnahmen gelten für jQuery? Beurteilen Sie die Art und Größe der hochgeladenen Bilder. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

JQuery wird hier verwendet, um den Typ und die Größe des hochgeladenen Bildes zu bestimmen:

<!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>
Nach dem Login kopieren

lastIndexOf() Methode ruft die angegebene Zeichenfolge von hinten nach vorne ab, wenn In der angegebenen Zeichenfolge wird ein Zeichen angezeigt. Geben Sie die Position des Zeichens zurück. Wenn nicht, geben Sie -1 zurück. Die Position beginnt bei 0 zu zählen.

toUpperCase()-Methode wird in Großbuchstaben umgewandelt

substring()-Methode fängt die Zeichenfolge ab. Der erste Parameter ist die Startposition und der zweite Parameter ist die Endposition (wenn er weggelassen wird, wird das Ende der Zeichenfolge standardmäßig abgefangen, im Gegensatz zu den Methoden slice() und substr()). akzeptiert nicht Die substring()

-Methode für negative Parameter ist die gleiche wie die slice()-Methode. Der Unterschied besteht darin, dass sie negative Parameter akzeptiert (wenn der Parameter eine negative Zahl ist, wird die Position aus berechnet Ende der Zeichenfolge). Ich empfehle die Verwendung von substring()

, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

substr()Empfohlene Lektüre:

Was sind die Haupt-APIs von jQuery

Detaillierte Erklärung der Verwendung von for-Schleife var und jQuery einlassen

Detaillierte Erläuterung der Verwendung der in js integrierten Methoden und Objekte

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie jQuery die Art und Größe der hochgeladenen Bilder bestimmt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage