jquery - IE8 和 IE9 中的 jquery.fancyupload.js “setOptions”错误

Question

我尝试使用本教程中的 jquery.fancyupload.js，但在使用 IE8 和 9 时出现错误“无法获取未定义或空引用的属性‘setOptions’”，但在 Firefox 和 Chrome 中一切正常。请帮忙。这是我的代码。

看法

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.imgareaselect.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.fancyupload.js")"></script>
<script>
    $(document).ready(function () {
        initSelect();
        $('#btnCloseUploadImg').click(function (e) {
            $('#tn_select').empty();
            $('.modal_part').hide();
        });
    });
</script>

<h2>Upload an image</h2>
@using(Html.BeginForm("UploadImage", "MyAccount", FormMethod.Post, new { enctype = "multipart/form-data" })) {
    @Html.HiddenFor(model => model.X)
    @Html.HiddenFor(model => model.Y)
    @Html.HiddenFor(model => model.Width)
    @Html.HiddenFor(model => model.Height)
    <div id="upload-choices">
        <div class="editor-row">
            <div class="editor-label">
                @Html.EditorFor(model => model.IsUrl)
                @Html.LabelFor(model => model.Url)
            </div><div class="editor-field">
                @Html.EditorFor(model => model.Url)
                @Html.ValidationMessageFor(model => model.Url)
            </div>
        </div>
        <div class="editor-row">
            <div class="editor-label">
                @Html.EditorFor(model => model.IsFile)
                @Html.LabelFor(model => model.File)
            </div><div class="editor-field">
                @Html.FileFor(model => model.File)
                @Html.ValidationMessageFor(model => model.File)
            </div>
        </div>
        <div class="editor-row">
            @Html.ValidationSummary(true)
        </div>
    </div>
    <div id="upload-cut">
        <img id="preview" src="@Url.Content("~/Content/imageUploader/empty.png")" />
    </div>
    <div class="clear">
        <button type="submit">Upload</button>
        <a href="#" class="btnCancel" id="btnCloseUploadImg">Cancel</a>
    </div>

}

错误图像

jquery.fancyupload.js 的源代码

var initSelect = function (context) {
    context = context || $(document);
    //Get the button of the form of the context
    var button = $('button', context).attr('disabled', true);
    //Get the checkboxes and disable them
    var boxes = $('input[type=checkbox]', context).attr('disabled', true);
    //Get the form of the context
    var form = $('form', context);

    //Get the preview image and set the onload event handler
    var preview = $('#preview', context).load(function () {
        setPreview();
        ias.setOptions({
            x1: 0,
            y1: 0,
            x2: $(this).width(),
            y2: $(this).height(),
            show: true
        });
    });

    //Set the 4 coordinates for the cropping
    var setPreview = function (x, y, w, h) {
        $('#X', context).val(x || 0);
        $('#Y', context).val(y || 0);
        $('#Width', context).val(w || preview[0].naturalWidth);
        $('#Height', context).val(h || preview[0].naturalHeight);
    };

    //Initialize the image area select plugin
    var ias = preview.imgAreaSelect({
        handles: true,
        instance: true,
        parent: 'body',
        onSelectEnd: function (s, e) {
            var scale = preview[0].naturalWidth / preview.width();
            var _f = Math.floor;
            setPreview(_f(scale * e.x1), _f(scale * e.y1), _f(scale * e.width), _f(scale * e.height));
        }
    });

    //Check one of the checkboxes
    var setBox = function (filter) {
        button.attr('disabled', false);
        boxes.attr('checked', false)
            .filter(filter).attr({ 'checked': true, 'disabled': false });
    };

    //Fallback for Browsers with no FileAPI
    var filePreview = function () {
        window.callback = function () { };
        $('body').append('<iframe id="preview-iframe" onload="callback();" name="preview-iframe" style="display:none"></iframe>');
        var action = $('form', context).attr('target', 'preview-iframe').attr('action');
        form.attr('action', '/Home/PreviewImage');
        window.callback = function () {
            setBox('#IsFile');
            var result = $('#preview-iframe').contents().find('img').attr('src');
            preview.attr('src', result);
            $('#preview-iframe').remove();
        };
        form.submit().attr('action', action).attr('target', '');
    };

    //Initial state of X, Y, Width and Height is 0 0 1 1
    setPreview(0, 0, 1, 1);

    //Fetch Flickr images
    var fetchImages = function (query) {
        $.getJSON('http://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?', {
            tags: query,
            tagmode: "any",
            format: "json"
        }, function (data) {
            var screen = $('<div />').addClass('waitScreen').click(function () {
                $(this).remove();
            }).appendTo('body');
            var box = $('<div />').addClass('flickrImages').appendTo(screen);
            $.each(data.items, function (i, v) {
                console.log(data.items[i]);
                $('<img />').addClass('flickrImage').attr('src', data.items[i].media.m).click(function () {
                    $('#Flickr', context).val(this.src).change();
                    screen.remove();
                }).appendTo(box);
            });
        });
    };

    //Flickr
    $('#FlickrQuery', context).change(function () {
        fetchImages(this.value);
    });

    $('#Flickr', context).change(function () {
        setBox('#IsFlickr');
        preview.attr('src', this.value);
    });

    //What happens if the URL changes?
    $('#Url', context).change(function () {
        setBox('#IsUrl');
        preview.attr('src', this.value);
    });

    //What happens if the File changes?
    $('#File', context).change(function (evt) {
        if (evt.target.files === undefined)
            return filePreview();

        var f = evt.target.files[0];
        var reader = new FileReader();

        if (!f.type.match('image.*')) {
            alert("The selected file does not appear to be an image.");
            return;
        }

        setBox('#IsFile');
        reader.onload = function (e) { preview.attr('src', e.target.result); };
        reader.readAsDataURL(f);
    });

    //What happens if any checkbox is checked ?!
    boxes.change(function () {
        setBox(this);
        $('#' + this.id.substr(2), context).change();
    });

    form.submit(function () {
        button.attr('disabled', true).text('Please wait ...');
    });
};