html5

2011-11-21 15 views
26

में इनपुट = फ़ाइल के आकार और प्रकार को सत्यापित करना संभव है, मैं यह http://dev.w3.org/html5/markup/input.file.html पढ़ रहा था, लेकिन मुझे केवल "स्वीकृति" विशेषता मिली।html5

मैंने कोशिश की इस

<input type="file" name="imagefilename" accept="image/x-png, image/gif, image/jpeg" /> 

यह फ़ाइल आकार के संभावित क्लाइंट साइड मान्यता है?

मैं IE

के लिए इस तकनीक
<html> 
<head> 
<script> 
function getSize() 
{ 
    var myFSO = new ActiveXObject("Scripting.FileSystemObject"); 
    var filepath = document.upload.file.value; 
    var thefile = myFSO.getFile(filepath); 
    var size = thefile.size; 
    alert(size + " bytes"); 
} 
</script> 
</head> 
<body> 
<form name="upload"> 
<input type="file" name="file"> 
<input type="button" value="Size?" onClick="getSize();"> 
</form> 
</body> 
</html> 

क्या यह संभव है भी ऐसा ही करने html5 filesystem api का उपयोग कर पाया?

अद्यतन

मैं कर सकता यह (demo):

<!doctype html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
</head> 
<body> 
    <form > 
     <input type=file id=f max-size=32154 > 
     <input type=submit> 
    </form> 
<script> 
$(function(){ 
    $('form').submit(function(){ 
     var isOk = true; 
     $('input[type=file][max-size]').each(function(){ 
      if(typeof this.files[0] !== 'undefined'){ 
       var maxSize = parseInt($(this).attr('max-size'),10), 
       size = this.files[0].fileSize; 
       isOk = maxSize > size; 
       return isOk; 
      } 
     }); 
     return isOk; 
    }); 
}); 
</script> 
</body> 

यह ठीक काम कर रहा है, लेकिन मुझे लगता है कि यह मान्य करने के लिए एक देशी एचटीएमएल 5 attr के लिए बेहतर होगा

उत्तर

6

मैं इस (demo) कर सकता है:

<!doctype html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
</head> 
<body> 
    <form > 
     <input type="file" id="f" data-max-size="32154" /> 
     <input type="submit" /> 
    </form> 
<script> 
$(function(){ 
    $('form').submit(function(){ 
     var isOk = true; 
     $('input[type=file][data-max-size]').each(function(){ 
      if(typeof this.files[0] !== 'undefined'){ 
       var maxSize = parseInt($(this).attr('max-size'),10), 
       size = this.files[0].size; 
       isOk = maxSize > size; 
       return isOk; 
      } 
     }); 
     return isOk; 
    }); 
}); 
</script> 
</body> 
</html> 
+11

developer.mozilla.org/en-US/docs/Web/API/File.fileSize के अनुसार, 'फ़ाइल आकार' को बहिष्कृत कर दिया गया है। इसके बजाय हर किसी को 'आकार' का उपयोग करना चाहिए। –

37
<form class="upload-form"> 
     <input class="upload-file" data-max-size="2048" type="file" > 
     <input type=submit> 
    </form> 
    <script> 
$(function(){ 
    var fileInput = $('.upload-file'); 
    var maxSize = fileInput.data('max-size'); 
    $('.upload-form').submit(function(e){ 
     if(fileInput.get(0).files.length){ 
      var fileSize = fileInput.get(0).files[0].size; // in bytes 
      if(fileSize>maxSize){ 
       alert('file size is more then' + maxSize + ' bytes'); 
       return false; 
      }else{ 
       alert('file size is correct- '+fileSize+' bytes'); 
      } 
     }else{ 
      alert('choose file, please'); 
      return false; 
     } 

    }); 
}); 
    </script> 

http://jsfiddle.net/9bhcB/2/

+0

Thanx, लेकिन मैं एक सामान्य समाधान कर दिया है। –

+0

@ सेर्गेई गोस्पोडारेट्स नाइस anser, मेरे कोड के लिए काम किया। प्रश्न, मैं फ़ाइल के प्रकार की जांच कैसे कर सकता हूं? मैं कुछ चेतावनी देता हूं जैसे 'अलर्ट (' टाइप '+ fileInput.get (0)। फाइलें [0]। टाइप); लेकिन कोई परिणाम नहीं। और दुर्भाग्य से कंसोल में कोई त्रुटि नहीं है। धन्यवाद – slevin

+0

@LasseEspeholt .fileSize को बहिष्कृत किया गया है, लेकिन मैं इसके बजाय .size का उपयोग कर रहा हूं, जो मान्य है (http://www.w3.org/TR/FileAPI/) –