Fatal编程技术网

javascript仅接受图像不工作

javascript html

javascript仅接受图像不工作,javascript,html,Javascript,Html,在我的代码中，我只想接受图像文件。否则它将不接受，并将发出警报，提示它不是图像文件 我在JSFIDLE中完成了以下代码：-- 但问题是……它没有发出任何信息。我做错了什么？使用以下方法： userfile.addEventListener('change', checkFileimg, false); function checkFileimg(e) { var file_list = e.target.files; for (var i = 0, file; f

在我的代码中，我只想接受
图像文件
。否则它将不接受，并将发出警报，提示它不是
图像文件

我在JSFIDLE中完成了以下代码：--

但问题是……它没有发出任何信息。我做错了什么？

使用以下方法：

userfile.addEventListener('change', checkFileimg, false);

    function checkFileimg(e) {

    var file_list = e.target.files;

    for (var i = 0, file; file = file_list[i]; i++) {
    var sFileName = file.name;
    var sFileExtension = sFileName.split('.')[sFileName.split('.').length - 1].toLowerCase();
    var iFileSize = file.size;
    var iConvert = (file.size / 10485760).toFixed(2);

    if (!(sFileExtension === "jpg")) {
    txt = "File type : " + sFileExtension + "\n\n"; 
    txt += "Please make sure your file is in jpg format.\n\n";
    alert(txt);
    document.getElementById('userfile').value='';
    }
    }
    }
使用以下命令：

userfile.addEventListener('change', checkFileimg, false);

    function checkFileimg(e) {

    var file_list = e.target.files;

    for (var i = 0, file; file = file_list[i]; i++) {
    var sFileName = file.name;
    var sFileExtension = sFileName.split('.')[sFileName.split('.').length - 1].toLowerCase();
    var iFileSize = file.size;
    var iConvert = (file.size / 10485760).toFixed(2);

    if (!(sFileExtension === "jpg")) {
    txt = "File type : " + sFileExtension + "\n\n"; 
    txt += "Please make sure your file is in jpg format.\n\n";
    alert(txt);
    document.getElementById('userfile').value='';
    }
    }
    }

您忘记在文件元素上添加id

<input type="file" id="file" name="fileUpload" size="50" />

您忘记在文件元素上添加id

<input type="file" id="file" name="fileUpload" size="50" />
您使用过

 var image =document.getElementById("file").value;
但是忘了给文件控制提供id，所以请提供

<input type="file" name="fileUpload" id="file" size="50" />
然后在W3TryIT浏览器中尝试以下代码，并在提交按钮上使用onClick事件，而不是onSubmit

<!DOCTYPE html>
<html>
<body>

<div align="center">

    <form:form modelAttribute="profilePic" method="POST"enctype="multipart/form-data" action="/SpringMvc/addImage">

                <input type="file" name="fileUpload" id="file" size="50" />


                <input type="submit" value="Add Picture" onClick="Validate();"/>

    </form:form>
</div>

<script>
  function Validate(){
  var image =document.getElementById("file").value;

 if(image!=''){
    var checkimg = image.toLowerCase();
    if (!checkimg.match(/(\.jpg|\.png|\.JPG|\.PNG|\.gif|\.GIF|\.jpeg|\.JPEG)$/)){
      alert("Please enter Image File Extensions .jpg,.png,.jpeg,.gif");
      document.getElementById("file").focus();
      return false;
   }
 }
 return true;
}
</script>

</body>
</html>


函数验证（）{
var image=document.getElementById（“文件”）.value；
如果（图像！=''）{
var checkimg=image.toLowerCase（）；
如果（！checkimg.match（/（\.jpg\.png\.jpg\.png\.gif\.gif\.jpeg\.jpeg）$/）{
警报（“请输入图像文件扩展名.jpg、.png、.jpeg、.gif”）；
document.getElementById（“文件”）.focus（）；
返回false；
}
}
返回true；
}
您使用过

 var image =document.getElementById("file").value;
但是忘了给文件控制提供id，所以请提供

<input type="file" name="fileUpload" id="file" size="50" />
然后在W3TryIT浏览器中尝试以下代码，并在提交按钮上使用onClick事件，而不是onSubmit

<!DOCTYPE html>
<html>
<body>

<div align="center">

    <form:form modelAttribute="profilePic" method="POST"enctype="multipart/form-data" action="/SpringMvc/addImage">

                <input type="file" name="fileUpload" id="file" size="50" />


                <input type="submit" value="Add Picture" onClick="Validate();"/>

    </form:form>
</div>

<script>
  function Validate(){
  var image =document.getElementById("file").value;

 if(image!=''){
    var checkimg = image.toLowerCase();
    if (!checkimg.match(/(\.jpg|\.png|\.JPG|\.PNG|\.gif|\.GIF|\.jpeg|\.JPEG)$/)){
      alert("Please enter Image File Extensions .jpg,.png,.jpeg,.gif");
      document.getElementById("file").focus();
      return false;
   }
 }
 return true;
}
</script>

</body>
</html>


函数验证（）{
var image=document.getElementById（“文件”）.value；
如果（图像！=''）{
var checkimg=image.toLowerCase（）；
如果（！checkimg.match（/（\.jpg\.png\.jpg\.png\.gif\.gif\.jpeg\.jpeg）$/）{
警报（“请输入图像文件扩展名.jpg、.png、.jpeg、.gif”）；
document.getElementById（“文件”）.focus（）；
返回false；
}
}
返回true；
}
如果我将exe文件重命名为.jpg怎么办？如何检查它？它取决于大小。扩展名将通过检测mime类型来转换文件，下面是如何->这是文本文件的示例..图像文件将是什么？这个家伙没有接受任何答案。然后你查找图像文件的mime类型当然：）查看我的链接中关于他们如何检查mime类型的第二个答案，这是一个mime类型的大列表->如果我将exe文件重命名为.jpg？我如何检查它？它取决于大小。扩展名将通过检测mime类型来转换文件，下面是如何->这是文本文件的示例..图像文件将是什么？这个家伙还没有接受任何答案。然后你查找图像文件的mime类型当然：）看到我的链接中关于他们如何检查mime类型的第二个答案，这是一个mime类型的大列表->请确保你的位置在将其名称重命名为您自己的名称之前使用这些函数->我已经使用它一年了。使用stackoverflow上给出的代码没有什么害处。我从源文件中复制了相同的函数，而不是从stackoverflow中复制的。我没有拒绝你，但是看到了你上面的答案。请确保在将这些函数的名称重命名为你自己的函数之前，先确认你从何处获得这些函数->我已经使用了一年。使用stackoverflow上提供的代码没有害处。我从我的源文件中复制了相同的，而不是从stackoverflow。我没有拒绝你，但看到了你上面的答案