jquery – 上传前检查文件扩展名

我使用uploadify上传Codeigniter文件。 在上传文件之前，我只需要检查文件扩展名是否正确是否正确。 我试过http://jquery.bassistance.de/和http://forum.jquery.com/

Bur没有得到适当的结果。 任何人都可以告诉我，我怎么能这样做？

提前致谢…

Answer 1

如果你想在没有插件的情况下这样做，你可以使用以下内容。

Javascript，使用jQuery：

$(document).ready( function (){ $("#your_form").submit( function(submitEvent) { // get the file name, possibly with path (depends on browser) var filename = $("#file_input").val(); // Use a regular expression to trim everything before final dot var extension = filename.replace(/^.*\./, ''); // Iff there is no dot anywhere in filename, we would have extension == filename, // so we account for this possibility now if (extension == filename) { extension = ''; } else { // if there is an extension, we convert to lower case // (NB this conversion will not effect the value of the extension // on the file upload.) extension = extension.toLowerCase(); } switch (extension) { case 'jpg': case 'jpeg': case 'png': alert("it's got an extension which suggests it's a PNG or JPG image (but NB that's only its name, so let's be sure that we, say, check the mime-type server-side!)"); // uncomment the next line to allow the form to submitted in this case: // break; default: // Cancel the form submission submitEvent.preventDefault(); } }); }); 

HTML：

Answer 2

您可以使用JQuery实现此目的

HTML

JQuery的

  $("#FilUploader").change(function () { var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp']; if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) { alert("Only formats are allowed : "+fileExtension.join(', ')); } }); 

有关详细信息，请单击此处

Answer 3

我要感谢发布答案的人，但他已删除了post。 我们可以这样做。

 $("#yourElem").uploadify({ 'uploader': ..., 'script': ... 'fileExt' : '*.jpg;*.gif;', //add allowed extensions ....., 'onSelect': function(e, q, f) { var validExtensions = ['jpg','gif']; //array of valid extensions var fileName = f.name; var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1); if ($.inArray(fileNameExt, validExtensions) == -1){ alert("Invalid file type"); $("#yourElem").uploadifyCancel(q); return false; } } }); 

谢谢你的答案，它确实有效……

Answer 4

这是一个简单的javascriptvalidation代码，在validation后会清理输入文件。

  function validate(file) { var ext = file.split("."); ext = ext[ext.length-1].toLowerCase(); var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"]; if (arrayExtensions.lastIndexOf(ext) == -1) { alert("Wrong extension type."); $("#image").val(""); } } 

Answer 5

如果您不想使用$(this).val() ，您可以尝试：

 var file_onchange = function () { var input = this; // avoid using 'this' directly if (input.files && input.files[0]) { var type = input.files[0].type; // image/jpg, image/png, image/jpeg... // allow jpg, png, jpeg, bmp, gif, ico var type_reg = /^image\/(jpg|png|jpeg|bmp|gif|ico)$/; if (type_reg.test(type)) { // file is ready to upload } else { alert('This file type is unsupported.'); } } }; $('#file').on('change', file_onchange); 

希望这可以帮助！

Answer 6

以下代码允许上传gif，png，jpg，jpeg和bmp文件。

 var extension = $('#your_file_id').val().split('.').pop().toLowerCase(); if($.inArray(extension, ['gif','png','jpg','jpeg','bmp']) == -1) { alert('Sorry, invalid extension.'); return false; } 

Answer 7

  function yourfunctionName() { var yourFileName = $("#yourinputfieldis").val(); var yourFileExtension = yourFileName .replace(/^.*\./, ''); switch (yourFileExtension ) { case 'pdf': case 'jpg': case 'doc': $("#formId").submit();// your condition what you want to do break; default: alert('your File extension is wrong.'); this.value = ''; } } 

Answer 8

        
 
 File Upload  
 
   

这是检查文件大小和文件扩展名的完整答案。 这使用了默认文件输入字段和jQuery库。 工作示例： https ： //jsfiddle.net/9pfjq6zr/2/