在上传文件之前使用Javascript显示图像和图像扩展的验证

 白骨精哥哥_350 发布于 2023-01-30 21:47

我的目标是首先验证上传文件是图像,如果是图像,我将显示它.我从验证码和图像代码中获取代码.

起初我能够显示图像.但是,当我将显示图像代码与验证代码相结合时,我无法同时验证和显示工作.

谁能帮帮我吗?以下是我的代码.提前致谢!:)








        
        
    
1 个回答
  • 我能够解决它.下面是正确的代码.:)

    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>
    

    改变的输入:

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

    要在上传之前显示图像:

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

    2023-01-30 21:53 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有