Question

我有这个，我不明白为什么不起作用。在演示中，它正常工作。调试器不会输入函数readImage（file），而在控制台中，this.files是未定义的。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ImagesAnatation.WebForm1" %>

<!DOCTYPE html>
<html>
<head>


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script> // var url = window.URL || window.webkitURL; // alternate use

            function readImage(file) {

                var reader = new FileReader();
                var image = new Image();

                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 / 102) + 'KB';
                        $('#uploadPreview').append('<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:400px;
}</style>
<meta charset=utf-8 />
<title>Multiple image upload with preview by Roko C.B.</title>
</head>
<body>
  <input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>

也许输入需要一个onchange属性？

Answer 1

您需要将jquery代码包装在$(document).ready()处理程序中，否则脚本将无法找到目标元素：

$(document).ready(function () {
    function readImage(file) {
        var reader = new FileReader();
        var image = new Image();

        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 / 102) + 'KB';
                $('#uploadPreview').append('<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]);
    });
});

input =文件更改不起作用

1 个答案: