如何限制图像尺寸和扩展其他然后JPG或PNG

问题描述 投票:0回答:6

我使用下面的代码来预览上传前的图像和它工作正常。但是,如何解决图像extenstion,使得用户不会上传任何无效的图片和尺寸也

<html lang="en">

<head>

  <title>Change image on select new image from file input</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<input type="file" name="file" id="profile-img">
<img src="" id="profile-img-tag" width="200px" />
<br />
<input type="file" name="file" id="profile-img2">
<img src="" id="profile-img2-tag" width="200px" />
<br />
<input type="file" name="file" id="profile-img3">
<img src="" id="profile-img3-tag" width="200px" />


  <script type="text/javascript">
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#' + $(input).attr('id') + '-tag').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$("[type=file]").change(function() {
  readURL(this);
});
  </script>


</body>

</html>

提前致谢。

javascript jquery html css
6个回答
1
投票

<html lang="en">

<head>

    <title>Change image on select new image from file input</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

</head>

<style type="text/css">
    .image-holder{
        height: 200px;
    }
    .image-holder img{
      max-height: 100%;
    }
</style>

<body>




<input id="fileUpload_one" type="file" multiple />
<div id="image-holder_one" class="image-holder"></div>



<script type="text/javascript">

$("#fileUpload_one").on('change', function () {

     //Get count of selected files
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder_one");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });

</script>





</body>

</html>

添加类到图像被放置div和通过CSS给予相应的造型图像。希望它可以帮助我增加了CSS和类到div希望它帮助。


1
投票

你需要确保你的形象标签和输入标签都有不同ids。如果你给图像标记相同id为您input标签,但给它-tag的后缀那么这将是它自己独特的id。使用这种方法,你可以使用下面的一行:

$('#'+$(input).attr('id') +'-tag').attr('src', e.target.result);

设置相应的图像标签的src属性。

请参见下面的工作例如:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    var extn = input.files[0].type.split('/')[1];
    var size = input.files[0].size;
    var maxSize = 40000; // file must be smaller than 40kb
    
    var valid = ["gif", "png", "jpg", "jpeg"];
    if (valid.includes(extn) && size < maxSize) {
      reader.onload = function(e) {
        $('#' + $(input).attr('id') + '-tag').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
}

$("[type=file]").change(function() {
  readURL(this);
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<input type="file" name="file" id="profile-img">
<img src="" id="profile-img-tag" width="200px" />
<br />
<input type="file" name="file" id="profile-img2">
<img src="" id="profile-img2-tag" width="200px" />

0
投票

ID必须是对DOM和JavaScript代码不同。

function readURL(input, inputId) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
        console.log(input)
            $('#' + inputId + '-tag').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$(".profile-img").change(function(){
    readURL(this, this.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="file" id="profile-img-1" class="profile-img">

<img src="" id="profile-img-1-tag" width="200px" />

<input type="file" name="file" id="profile-img-2" class="profile-img">

<img src="" id="profile-img-2-tag" width="200px" />

0
投票

你可以尝试多种图片上传和预览代码,也是我在里面添加验证过。

JS代码:

function previewImages() {

  var preview = document.querySelector('#preview');
 
 
  
  if (this.files) {
    [].forEach.call(this.files, readAndPreview);
  }

  function readAndPreview(file) {

  		
  		
  // Make sure `file.name` matches our extensions criteria
    if (!(/\.(jpg|png)$/i.test(file.name)))  {
      return alert(file.name + " is as not image file");
    } 

   else if(file.size/(1024*1024) > 2 ) {
    	 return alert(file.name + " size is greater than 2MB");
    }
    
    var reader = new FileReader();
    
    reader.addEventListener("load", function() {
      var image = new Image();
      image.height = 100;
      image.width = 100;
      image.title  = file.name;
      image.src    = this.result;
      preview.appendChild(image);
    }, false);
    
    reader.readAsDataURL(file);
    
  }

}
document.querySelector('#file-input').addEventListener("change", previewImages, false);
<div class="input-container">
	<div class="multiple-img">
		<p class="choosetext">Choose multiple images :</p>
		<input id="file-input" type="file" id= "files" multiple>
          <div id="preview" ></div>
	</div>

</div>

0
投票

这将是最容易的。这是所有的代码。只需添加所需height同时在JavaScript代码上传图像width属性。尝试这个:

$("#fileUpload_one").on('change', function () {
  //Get count of selected files
  var countFiles = $(this)[0].files.length;
  var imgPath = $(this)[0].value;
  var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  var image_holder = $("#image-holder_one");
  image_holder.empty();
  if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
    if (typeof (FileReader) != "undefined") {
      //loop for each file selected for uploaded.
      for (var i = 0; i < countFiles; i++) {
        var reader = new FileReader();
        reader.onload = function (e) {
          $("<img />", {
            "src": e.target.result,
            "class": "thumb-image",
            "height": "200px",
            "width": "200px"
          }).appendTo(image_holder);
        }
        image_holder.show();
        reader.readAsDataURL($(this)[0].files[i]);
      }
    } else {
      alert("This browser does not support FileReader.");
    }
  } else {
    alert("Pls select only images");
  }
});
<input id="fileUpload_one" type="file" multiple />
<div id="image-holder_one"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

0
投票

在文件打开/放你得到一个文件对象//删除场景

 c.ondrop = function (e) {
var file=e.dataTransfer.files[0];
       console.log(file.size);//Co,mpare here size
        console.log(this.files[0].type);////Co,mpare type here
            };

输入文件类型的场景

的document.getElementById( “店”)。平变化=函数(e)中{

        var file =this.files[0];
       console.log(file.size);//Co,mpare here size
         console.log(this.files[0].type);////Co,mpare type here

        fread(this.files[0]);
    };
© www.soinside.com 2019 - 2024. All rights reserved.