Heim > Artikel > Web-Frontend > So erhalten Sie den Typ und die Größe des hochgeladenen Bildes

So erhalten Sie den Typ und die Größe des hochgeladenen Bildes

php中世界最好的语言Original: 2018-06-08 14:28:452402Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie den Typ und die Größe des hochgeladenen Bildes ermitteln und welche Vorsichtsmaßnahmen zum Ermitteln des Typs und der Größe des hochgeladenen Bildes gelten. 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 = $(&#39;#p_1&#39;),
    p_2 = $(&#39;#p_2&#39;);
  $(&#39;body&#39;).on(&#39;change&#39;,&#39;#file&#39;,function(){
    var path = $(this).val(),
    extStart = path.lastIndexOf(&#39;.&#39;),
    ext = path.substring(extStart,path.length).toUpperCase();
    //判断图片格式
    if(ext !== &#39;.PNG&#39; && ext !== &#39;.JPG&#39; && ext !== &#39;.JPEG&#39; && ext !== &#39;.GIF&#39;){
      alert(&#39;请上传正确格式的图片&#39;);
      resetFile();
      return false;
    }else{
      p_1.html(&#39;图片格式为：&#39; + ext);
    }
    //获取图片大小，注意使用this，而不是$(this)
    var size = this.files[0].size / 1024;
    if(size > 10240){
      alert(&#39;图片大小不能超过10M&#39;);
      resetFile();
      return false;
    }else{
      p_2.html(&#39;图片大小为：&#39; + size.toFixed(2) + &#39;KB&#39;);
    }
  })
  //还原
  function resetFile(){
    //清空file表单的值，不能直接使用$(&#39;#file&#39;).val(&#39;&#39;)这种写法
    $(&#39;form&#39;).html(&#39;<input type="file" id="file" />&#39;);
    p_1.html(&#39;图片格式为：&#39;);
    p_2.html(&#39;图片大小为：&#39;);
  }
})
</script>
</body>
</html>

lastIndexOf()Die Methode ruft die angegebene Zeichenfolge von hinten nach vorne ab. Wenn das angegebene Zeichen angezeigt wird, wird das zurückgegeben Position, an der sich das Zeichen befindet. Wenn nicht, wird die Position bei 0 zurückgegeben. Die Methode

toUpperCase() wandelt sie in Großbuchstaben um Die Methode fängt die Zeichenfolge ab, der zweite Parameter ist die Endposition (im Gegensatz zu den Methoden

und

). 🎜> akzeptiert keine negativen Parameter substring()slice()substr() Methode ist die gleiche wie substring() Methode, der Unterschied besteht darin, dass sie negative Parameter akzeptiert (wenn der Parameter eine negative Zahl ist, wird die Position vom Ende aus berechnet Die Methode

slice() fängt die Zeichenfolge ab, der erste Parameter ist die Startposition und der zweite Parameter ist die abgefangene Länge (anders als Slice und Teilzeichenfolge). Es wird nicht mehr empfohlen, substring() Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter php Chinese Andere verwandte Artikel online!

Empfohlene Lektüresubstr()

So verwenden Sie Vue, um lokalen JSON anzufordern

Detaillierte Erläuterung praktischer Fälle von React Props und State Attribute

Das obige ist der detaillierte Inhalt vonSo erhalten Sie den Typ und die Größe des hochgeladenen Bildes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：So fordern Sie lokalen JSON mit Vue anNächster Artikel：So fordern Sie lokalen JSON mit Vue an

In Verbindung stehende Artikel

Mehr sehen