2

嗨，我的问题是我有一个动态扩展的表单。我将使用它将文件上传到电子商务网站以上传产品图片，我想在上传之前限制大小并过滤扩展名，但我是一个 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>

先感谢您

编辑：

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

我在小提琴http://jsfiddle.net/Glink/sGCeK/上有这个代码

它可以帮助你帮助我...

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

再次提前谢谢你...

4

2 回答 2

1

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

例子

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

示例：更新示例

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

文件扩展名示例

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

于 2012-11-08T18:54:35.023 回答
0

嗨，最终回答我自己的问题很尴尬，但这里是：

验证文件类型和循环在这个小提琴上：http: //jsfiddle.net/Glink/sGCeK/

$(document).ready(function() {

    var counter = 1;
    var limit = 5;
    $("#btn2").click(function() {

        if (counter == limit) {
            alert("You have reached the limit of " + counter + " fotos");
        } else {
            $("#dynamicInput").append("<br>Foto <br><input class='test' type='file' name='myInputs[]'>");
        }
        counter++;
    });


    $("form").submit(function() {

        $('.test').each(function(i, obj) {

            var file = $(this).val();
            var ext = $(this).val().substr(($(this).val().lastIndexOf('.') + 1));
            //alert(file);
            if (ext == "jpg" || ext == "png" || ext == "JPG" || ext == "jpeg") {
                alert("File: " + file + " Valid");
                //return true;
            } else {
                alert("Invalid file only files with extension. Jpeg,. Jpg or. Png are accepted.");
                return false;
            }
        });
    });
});

我在编辑第一篇文章时无法循环，因为我忘记将类添加到添加字段按钮，并且由于我不习惯该语言，所以我错过了，在查看代码时发现了问题.. .

所以这是我的最终编辑，我的实现的最终代码在这里：http: //jsfiddle.net/Glink/Ak2QA/

我不知道我是否使用了好的做法，但它现在正在工作，当这个项目结束时，我将学习更多 jQuery 和 js ......

由于我使用的是 xHTML，所以文件大小是什么，使用 JavaScript 是不可能的，我必须使用 Flash 或 SilverLight，我不想，所以我不会使用...

如果我使用的是 HTML5，则可以使用此处发布的内容： 如何使用 jQuery 检查文件输入大小？

它仍然有一个我不明白的错误，当它找到一个无效文件时它仍然发送表单，即使它返回一个错误......如果我找出为什么我会在这里发布......

于 2012-11-12T10:35:10.410 回答