このチュートリアルの jquery.fancyupload.js を使用してみましたが、IE8 および 9 を使用すると「未定義または null 参照のプロパティ '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 ...');
});
};