我只需要通过<input type="file">标签上传图像文件。

现在,它接受所有的文件类型。但是,我想将其限制为特定的图像文件扩展名,包括.jpg, .gif等。

如何实现这个功能?


当前回答

使用type="file"和accept="image/*"(或者你想要的格式),允许用户选择一个特定格式的文件。但是你必须在客户端重新检查,因为用户可以选择其他类型的文件。 这对我很有用。

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

然后,在javascript脚本中

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }

其他回答

步骤: 1. 为输入标签添加接受属性 2. 使用javascript验证 3.添加服务器端验证,以验证内容是否确实是预期的文件类型

对于HTML和javascript:

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

解释:

属性中显示的文件进行筛选 弹出文件选择器。然而,它不是一个验证。这只是一个 浏览器提示。中的选项,用户仍然可以更改 弹出。 javascript只验证文件扩展名,但不能 真正验证所选文件是真正的JPG还是png。 因此,您必须在服务器端编写文件内容验证。

你可以添加特定类型的图像或其他文件类型,并在你的代码中进行验证:

<input  style="margin-left: 10px; margin-top: 5px;" type="file" accept="image/x-png,image/jpeg,application/pdf"
                (change)="handleFileInput($event,'creditRatingFile')" name="creditRatingFile" id="creditRatingFile">
    


  
      handleFileInput(event) {
    console.log(event);
    const file = event.target.files[0];
    if (file.size > 2097152) {
        throw err;
    } else if (
      file.type !== "application/pdf"  &&
      file.type !== "application/wps-office.pdf"   && 
      file.type !== 'application/pdf'  && file.type !== 'image/jpg'  && file.type !== 'image/jpeg'  && file.type !== "image/png"
    ) {
throw err;
    } else {
      
        console.log('file valid')
    }
  }

使用输入标记的accept属性。要只接受PNG, JPEG和GIF,您可以使用以下代码:

<标签>你的形象文件 <输入类型=“文件” < - >标签

或者仅仅是:

<标签>你的形象文件 <输入类型=“文件” < - >标签

请注意,这只向浏览器提供了一个提示,提示要向用户显示什么文件类型,但这很容易避免,因此您也应该始终在服务器上验证上传的文件。

它应该可以在IE 10+, Chrome, Firefox, Safari 6+, Opera 15+上运行,但在手机上的支持非常粗略(截至2015年),根据一些报告,这实际上可能会阻止一些移动浏览器上传任何东西,所以一定要好好测试你的目标平台。

有关浏览器支持的详细信息,请参见http://caniuse.com/#feat=input-file-accept

你可以使用accept属性<input type="file">读取这个文档http://www.w3schools.com/tags/att_input_accept.asp

简单而强大的方式(动态接受)

将格式放在数组中,如"image/*"

var上传“上传”= document . getElementById (); var阵列= [/ mp4视频”,“image / p”); 上传. accept =阵列; 上传addEventListener(“change”()= > ' 上传游戏机。log (value)。 ') <输入类型=“文件”id=“上传”>