当前位置:Gxlcms > JavaScript > 上传图片js判断图片尺寸和格式兼容IE

上传图片js判断图片尺寸和格式兼容IE

时间:2021-07-01 10:21:17 帮助过:27人阅读

js代码:

  1. $(".head").change(function() {
  2. var val = $(this).val();
  3. if(!val.match( /.jpg|.gif|.png|.bmp/i ) ){
  4. imgtype = false;
  5. alert('图片格式无效!');
  6. }else{
  7. if (FileReader) {
  8. var reader = new FileReader(),
  9. file = this.files[0];
  10. reader.onload = function(e) {
  11. var image = new Image();
  12. image.src = e.target.result;
  13. image.onload=function(){
  14. if(image.width > 128 || image.height > 128){
  15. fill = false;
  16. alert("头像尺寸应在128x128之间");
  17. }
  18. }
  19. };
  20. reader.readAsDataURL(file);
  21. }else{
  22. //这是ie9版本
  23. $(".preview_size_fake").show();
  24. var objPreviewSizeFake = $(".preview_size_fake").get(0);
  25. var fileupload = $(this).get(0);
  26. fileupload.select();
  27. fileupload.blur();
  28. path = document.selection.createRange().text;
  29. if (/"\w\W"/.test(path)) {
  30. path = path.slice(1,-1);
  31. }
  32. objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = path;
  33. if(objPreviewSizeFake.offsetWidth > 128 || objPreviewSizeFake.offsetHeight > 128){
  34. fill = false;
  35. alert("头像尺寸应在128x128之间");
  36. }
  37. document.selection.empty();
  38. }
  39. }
  40. });

css代码(这个是必须写的,如果不写,ie下不起作用)

  1. .preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */
  2. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
  3. height: 1px;
  4. visibility:hidden;
  5. overflow: hidden;
  6. display: none;
  7. }

html代码:

  1. <input class="head" type="file" name="avatar">
  2. <img class="preview_size_fake" />

人气教程排行