窗體文件驗證擴展名和大小jQuery或jscript

嗨，我的問題是，我有一個動態擴展的窗體。我會用它來上傳文件到電子商務網站上傳產品圖片，我想限制尺寸並在上傳前過濾擴展名，但我是一個javascript，和/或jQuery的noob ...窗體文件驗證擴展名和大小jQuery或jscript

我需要幫助驗證這些，因爲我相信我能處理的事情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？

再次感謝你在前進......

來源

2012-11-08 Fernando Andrade

你在正確的軌道上，但是你應該嘗試使用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++; 
});

UPDATE：小姐閱讀問題，我還以爲你看剛剛追加新領域的框。對於上傳的文件大小，您可以通過使用得到這個數字：

this.files[0].fileSize

例子：Updated Example

至於檢查擴展沒有我發現這樣做的簡單方法。你可能會需要使用某種正則表達式。事情是這樣的：

File Extension Example

這應該讓你在正確的道路上。

來源

2012-11-08 18:54:35 AJak

謝謝爲答案，但它似乎並沒有限制文件的類型上傳或文件的大小，這是我的目標。但是，也許我沒有表達我的自我正確對不起，因爲... –

對不起，懷念閱讀，生病看我是否可以修改該部分，但多複雜一點 – AJak

感謝您的幫助 –

你好，這是尷尬的結束了回答我的問題，但在這裏它是：

驗證文件類型和循環是對這個小提琴： 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; 
      } 
     }); 
    }); 
});

我一直沒能夠循環當我編輯我的第一篇文章，因爲我忘了添加類到添加字段按鈕，因爲我不習慣的語言，我錯過了，發現審查代碼時的問題...

所以這是我的鰭al編輯，我的實現的結束代碼是這裏： http://jsfiddle.net/Glink/Ak2QA/

我不知道我是否使用良好的做法，但它現在工作，當這個項目結束時，我會學習更多的jQuery和js ...

，因爲我使用的xHTML它僅僅是不可能的使用JavaScript我貴方覺得必須使用Flash或Silverlight，我不想所以我不會用什麼來的文件大小......

如果我正在使用HTML5這將是可能的，使用什麼張貼在這裏： How to check file input size with jQuery?

它仍然有一個錯誤，我不明白當它發現一個非有效的文件，它仍然發送表格，即使它返回一個假...如果我找到爲什麼我會在這裏發佈...

來源

2012-11-12 10:35:10

窗體文件驗證擴展名和大小jQuery或jscript

回答

相關問題