Question

我从这个输入字段中得到了一个jpeg-image：

<input type="file" id="iAppIcon" accept="image/jpeg" form="imageAppIcon"></input>

我现在该如何处理？当我使用console.log($("#imageAppIcon").val())时，我得到＆＃34;未定义＆＃34;。

我也无法找到它的类型。

我最终想用它做的是将其转换为base64，以保存它。我已经看过很多关于使用画布的帖子，但他们使用了不同的方法来上传图片，至少它看起来好像他们会这样做。

Answer 1

感谢GregL

Check file type when form submit?

不使用onsubmit，而是使用jQuery的提交处理程序，并使用如下的一些javascript进行验证：

function getExtension(filename) {
    var parts = filename.split('.');
    return parts[parts.length - 1];
}

function isImage(filename) {
    var ext = getExtension(filename);
    switch (ext.toLowerCase()) {
    case 'jpg':
    case 'gif':
    case 'bmp':
    case 'png':
        //etc
        return true;
    }
    return false;
}

function isVideo(filename) {
    var ext = getExtension(filename);
    switch (ext.toLowerCase()) {
    case 'm4v':
    case 'avi':
    case 'mpg':
    case 'mp4':
        // etc
        return true;
    }
    return false;
}

$(function() {
    $('form').submit(function() {
        function failValidation(msg) {
            alert(msg); // just an alert for now but you can spice this up later
            return false;
        }

        var file = $('#file');
        var imageChosen = $('#type-1').is(':checked');
        if (imageChosen && !isImage(file.val())) {
            return failValidation('Please select a valid image');
        }
        else if (!imageChosen && !isVideo(file.val())) {
            return failValidation('Please select a valid video file.');
        }

        // success at this point
        // indicate success with alert for now
        alert('Valid file! Here is where you would return true to allow the form to submit normally.');
        return false; // prevent form submitting anyway - remove this in your environment
    });

});

Demo

如何使用javascript处理上传的图像

1 个答案: