Question

我有一个输入类型文件，它应该选择一个图像并验证文件扩展名以查看它是否真的是一个图像。

当我选择图像时，它应该显示它，但它不会。

有人可以帮助我吗？

这是代码：

<form id="form">
    <input type="file"  id="imageupload" onchange="return ValidateFileUpload()" />
    <img src="#" id="image">
</form>

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

        if (FileUploadPath == '') {
            alert("Please upload an image");

        } 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) {
                        $('#image').attr('src', e.target.result);
                    }

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

            } 

            else {
                alert("Allowed file types: GIF, PNG, JPG, JPEG and BMP. ");

            }
        }
    }
</SCRIPT>

Answer 1

它正在使用google chrom，firefox，不使用IE

请注意，fuData.files仅适用于支持File API的浏览器。例如，对于IE9及更早版本，您只能访问文件名。 input元素在非File API浏览器中没有files属性。

Answer 2

你的大部分代码都有效，除了onchange =＆＃34; ...＆＃34;在chrome中无法识别。所以我改变了你的代码，通过jQuery设置事件处理程序，使它工作。

$("document").ready(function(){

    $("#imageupload").change(function() {

        ValidateFileUpload();
    });
});

在此处查看演示http://jsfiddle.net/q53qm/4/

javascript图像上传器不显示所选图像

2 个答案: