在上传文件之前显示图像和图像扩展的验证使用Javascript [英] Display image and Validation of image extension before uploading file Using Javascript

问题描述

我的目标是首先验证上传文件是一个图像，如果它是一个图像，我会显示它。我从验证码和图片代码。

起初，我能够显示图像。但是，当我将显示图像代码与验证代码结合在一起时，我无法同时验证和显示。

任何人都可以帮我吗？以下是我的代码。提前致谢！ ：）

 < input type =filename =dataFileid =fileChooseronchange =readURL ）; /> 
 
 
 
 
 
< SCRIPT type =text / javascript> 
 
 var _validFileExtensions = [.jpg，.jpeg，.bmp，.gif，.png]; 
 
函数readURL（输入）{
 
 var arrInputs = document.getElementById（fileChooser）。 
 for（var i = 0; i< arrInputs.length; i ++）{
 var oInput = arrInputs [i]; 
 if（oInput.type ==file）{
 var sFileName = oInput.value; 
 if（sFileName.length> 0）{
 var blnValid = false; 
 for（var j = 0; j< _validFileExtensions.length; j ++）{
 var sCurExtension = _validFileExtensions [j]; 
 if（sFileName.substr（sFileName.length  -  sCurExtension.length，sCurExtension.length）.toLowerCase（）== sCurExtension.toLowerCase（））{
 blnValid = true; （input.files&& input.files [0]）{
 var reader = new FileReader（）; 
 
 if 
 
 reader.onload = function（e）{
 $（'＃blah'）。attr（'src'，e.target.result）
}; 
 
 reader.readAsDataURL（input.files [0]）; 
} 
 
 
 break; 
 
 
 $ b如果（！blnValid）{
 alert（Sorry，+ sFileName +is invalid，allowed extensions are：+ _validFileExtensions.join （，））; 
返回false; 
} 
} 
} 
} 
 
 return true; 
 
 
 
 
 
 $ b $ / code> 




解决方案

我能解决这个问题。下面是正确的代码。 ：）



JavaScript



 < / c ; SCRIPT type =text / javascript> 
函数ValidateFileUpload（）{
 var fuData = document.getElementById（'fileChooser'）; 
 var FileUploadPath = fuData.value; 
 $ b $ //检查用户是否上传文件
 if（FileUploadPath ==''）{
 alert（请上传图片）; 
 $ b $ else {
 var Extension = FileUploadPath.substring（
 FileUploadPath.lastIndexOf（'。'）+ 1）.toLowerCase（）; 
 
 //上传的文件是图片
 
 if（Extension ==gif|| Extension ==png|| Extension ==bmp
 || Extension ==jpeg|| Extension ==jpg）{
 
 //显示
 if（fuData.files&& fuData.files [0 ]）{
 var reader = new FileReader（）; 
 
 reader.onload = function（e）{
 $（'＃blah'）。attr（'src'，e.target.result）; 
} 
 
 reader.readAsDataURL（fuData.files [0]）; 
 
 
 
 $ b //文件上传不是图像
其他{
 alert（图片只允许文件类型GIF，PNG，JPG，JPEG和BMP）; 
 
} 
} 
} 
< / SCRIPT> 
  

更改后的输入：



 < input type =filename =dataFileid =fileChooseronchange =return ValidateFileUpload（）/> 
  

在上传之前显示图片：



 < img src =images / noimg.jpgid =blah> 
  




My goal is to first validate the upload file is an image and if it is an image I will display it. I get the codes from Validation Code and Image Code.

At first I was able to display image. However, when I combined display image code with validation code, I did not able to get both validation and display worked.

Can anyone please help me? Below are my codes. Thanks in advance! :)

<input type="file" name="dataFile" id="fileChooser" onchange="readURL(this);" />





<SCRIPT type="text/javascript">

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];

     function readURL(input) {

         var arrInputs = document.getElementById("fileChooser").value;
            for (var i = 0; i < arrInputs.length; i++) {
                var oInput = arrInputs[i];
                if (oInput.type == "file") {
                    var sFileName = oInput.value;
                if (sFileName.length > 0) {
                    var blnValid = false;
                    for (var j = 0; j < _validFileExtensions.length; j++) {
                        var sCurExtension = _validFileExtensions[j];
                        if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                            blnValid = true;

                            if (input.files && input.files[0])  {
                                var reader = new FileReader();

                                reader.onload = function (e) {
                                    $('#blah').attr('src', e.target.result)
                                };

                                reader.readAsDataURL(input.files[0]);
                            }


                            break;
                        }
                    }

                    if (!blnValid) {
                        alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                        return false;
                    }
                }
            }
        }

        return true;





    }

解决方案

I am able to solve it. Below ar the correct codes. :)

JavaScript

<SCRIPT type="text/javascript">
    function ValidateFileUpload() {
        var fuData = document.getElementById('fileChooser');
        var FileUploadPath = fuData.value;

//To check if user upload any file
        if (FileUploadPath == '') {
            alert("Please upload an image");

        } else {
            var Extension = FileUploadPath.substring(
                    FileUploadPath.lastIndexOf('.') + 1).toLowerCase();

//The file uploaded is an image

if (Extension == "gif" || Extension == "png" || Extension == "bmp"
                    || Extension == "jpeg" || Extension == "jpg") {

// To Display
                if (fuData.files && fuData.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        $('#blah').attr('src', e.target.result);
                    }

                    reader.readAsDataURL(fuData.files[0]);
                }

            } 

//The file upload is NOT an image
else {
                alert("Photo only allows file types of GIF, PNG, JPG, JPEG and BMP. ");

            }
        }
    }
</SCRIPT>

The input on change:

<input type="file" name="dataFile" id="fileChooser" onchange="return ValidateFileUpload()" />

To display an image before uploaded:

<img src="images/noimg.jpg" id="blah">

这篇关于在上传文件之前显示图像和图像扩展的验证使用Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！