Question

我需要一个功能，我上传图像并检查最大标准。如果图像大于最大标准，则显示警告信息

我的代码在jfiddle工作，但在html页面中它不工作。我的coading在下面给出了pls view

我的指点是：

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://jqueryui.com/resources/demos/style.css" rel="stylesheet"></link>
<script type="text/jquery">



    function readImage(file) {

    var reader = new FileReader();
    var image = new Image();
    var maxh = 800;
    var maxw = 800;
    reader.readAsDataURL(file);
    reader.onload = function (_file) {
        image.src = _file.target.result; // url.createObjectURL(file);
        image.onload = function () {
            var w = this.width,
                h = this.height,
                t = file.type, // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~ (file.size / 1024) + 'KB';
            if (w > maxw && h > maxh) {
                alert("Height is bigger then over max criteria pls select image max height and width                                            =2024X2024");
                alert(width);
                alert(height);
            } else {


                $('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
            }

        };
        image.onerror = function () {
            alert('Invalid file type: ' + file.type);
        };
    };

}
$("#choose").change(function (e) {
    if (this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});

</script>



<style>

  #uploadPreview img {
    height:32px;
}

</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>

</body>
</html>

问题/问题：不在html页面中工作。 http://jsfiddle.net/5SVuA/1/

希望您了解我的问题

Answer 1

首先，您的脚本类型script type="text/jquery"错误，而不是script type="text/javascript"。

将您的javascript代码移至domready函数：

$(function () {
    //your code here
});

图像的尺寸，然后检查标准，并显示图像

1 个答案: