限制多少動態表單字段的顯示和使用javascript

Question

驗證爲圖像，我有以下的jQuery啓動Javascript：

<form> 
    <input type="file"> 
</form> 

jQuery(function($) { 

    $('form').delegate('input[type=file]', 'change', function() { 
    var form = $(this).closest('form'); 
    form.append('<input type="file">'); 
    }); 

}); 

它會動態地添加一個文件上傳字段作爲用戶添加他們要上傳的文件。我怎樣才能限制它只有圖像，並添加5個圖像後停止添加新的字段？

我試圖從具有大量的現場，我確認爲圖像像這樣進行切換：

var valid_extensions = /(.gif|.jpg|.jpeg|.png)$/i; 
function CheckExtension(fld){ 
    if (valid_extensions.test(fld.value)) return true; 
    alert('only gif, png or jpg formats are allowed!'); 
    fld.select(); 
    fld.value=""; 
    fld.focus(); 
    return false; 
} 

<input type="file" onChange="return CheckExtension(this);"> 

Answer 1

瞭解你的目標，你應該重寫你的函數：

var checkExtension; 
var valid_extensions = /(.gif|.jpg|.jpeg|.png)$/i; 
var limit = 5; // define the limit of rows here 
var i = 0; 
$('form').delegate("input[type=file]", "change", function() { 
    if (i < limit && checkExtension(this)) { 
     $('form').append($("<input>").attr({type: "file"})); 
    } 
    i++; 
}); 
checkExtension = function (fld) { 
    if (valid_extensions.test(fld.value)) return true; 
    alert('only gif, png or jpg formats are allowed!'); 
    fld.select(); 
    fld.value=""; 
    fld.focus(); 
    return false; 
} 

Answer 2

您可以使用HTML5的accept屬性來指定MIMETYPES你會接受。

對於你的極限，一個簡單的遞增整數，三元應該處理它，就像這樣：

var i = 0; 
$('form').delegate('input[type=file]', 'change', function() { 
    var form = $(this).closest('form'); 
    i < 5 ? form.append('<input type="file">') : ""; 
    i++; 
}); 

如果要使用JavaScript，谷歌搜索返回此堆棧溢出的答案： Preview an image before it is uploaded

Answer 3

隨着@Austin的幫助下，這裏是最後的碼T帽子爲我工作。它會動態創建一個文件輸入字段並僅接受圖像。我仍在測試，但是這個應該在支持js的所有瀏覽器中工作。

<form> 
<input type="file"> 

<script> 
jQuery(function($) { 

    var checkExtension; 
    var valid_extensions = /(.gif|.jpg|.jpeg|.png)$/i; 
    var limit = 5; // define the limit of rows here 
    var i = 1; 
    $('form').delegate("input[type=file]", "change", function() { 
     if (i < limit && checkExtension(this)) { 
      $('form').append($('<input type="file">')); 
     } 
     i++; 
    }); 
    checkExtension = function (fld) { 
     if (valid_extensions.test(fld.value)) return true; 
     alert('only gif, png or jpg formats are allowed!'); 
     fld.select(); 
     fld.value=""; 
     fld.focus(); 
     return false; 
    } 

}); 
</script> 
</form>