javascript - 表单文件验证扩展名和大小 jquery 或 jscript

Question

您好，我的问题是我有一个动态扩展的表单。我将使用它将文件上传到电子商务网站以上传产品图片，我想限制大小并在上传前过滤扩展名，但我是 javascript 和/或 jQuery 的菜鸟......

我需要帮助来验证这些，因为我认为我可以处理 PHP 方面的事情 :) 这是我的实验代码:





<script language="Javascript" type="text/javascript">
var counter = 1;
var limit = 10;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the maximum of " + counter + " fotos");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Foto " + (counter + 1) + " <br><input type='file' name='myInputs[]'>";
      document.getElementById(divName).appendChild(newdiv);
      counter++;
 }
}
</script>

<form method="POST" enctype="multipart/form-data"> 
     <div id="dynamicInput">
          Foto 1<br><input type="file" name="myInputs[]">
 </div>
 <input type="button" value="Add more fotos" onClick="addInput('dynamicInput');">
</form>

提前谢谢你

编辑:

好的，我可以验证提交的文件类型，但我无法遍历不同的文件字段...

我在 fiddle 上有这段代码 http://jsfiddle.net/Glink/sGCeK/

它可能会帮助你帮助我......

还有一个问题，如果我的代码在 xHTML 中，是否很难更新到 HTML5？

再次提前感谢您...

Answer 1

您走在正确的轨道上，但是您应该尝试将 jQuery 与您的 javascript 一起使用。我想你会发现事情容易多了。我已经写了一个我认为你想要完成的简单例子。如果您需要进一步的解释，请随时询问。

Example

HTML:

<form method="POST" enctype="multipart/form-data" id="theForm"> 
 <label class="dynamicInput">
      Foto 0<input type="file" name="myInputs1">
 </label>
<br/>
</form>

JS:

var counter = 1;
var limit = 10;


$("#addButton").click(function(){
htmlString = '<label class="dynamicInput">Foto'+ counter +'<input type="file" name="myInputs '+ counter + '"></label><br/>'

 if(limit > counter)
$("#theForm").append(htmlString);
counter++;
});
​

更新:错过阅读问题，我以为你只是想在框中添加新字段。对于上传的文件大小，您可以使用以下方法获取该数字:

this.files[0].fileSize

示例:Updated Example

至于检查扩展，我发现没有一种简单的方法可以做到这一点。您可能需要使用某种正则表达式。像这样:

File Extension Example

这应该会让您走上正确的道路。