私は画像プレビューにjquery＆ajaxプラグインを使用しようとしていますが、私はそれを機能させることができません。これは私がコード/デモを見つけたサイトです
http://www.zurb.com/playground/ajax_upload
プレビューの背景を変更することはできますが、選択した画像ファイルの画像が表示されません。
これは私の、chtmlファイルです
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="@Href("~/Styles/jquery/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<link href="@Href("~/Styles/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Href("~/Scripts/jquery-1.7.js")" type="text/javascript"></script>
<script src="@Href("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script src="@Href("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="@Href("~/Scripts/ajaxupload.js")" type="text/javascript"></script>
<script>
$(document).ready(function(){
var thumb = $('img#thumb');
new AjaxUpload('imageUpload', {
action: $('form#newHotnessForm').attr('action'),
name: 'image',
onSubmit: function(file, extension) {
$('div.preview').addClass('loading');
alert(file);
},
onComplete: function(file, response)
{
thumb.load(function()
{
$('div.preview').removeClass('loading');
thumb.unbind();
});
thumb.attr('src', response);
}
});
});
</script>
</head>
<body>
<h2>New Hotness</h2>
<div>
<div class="preview">
<img id="thumb" width="100px" height="100px" src="../Images/Test.jpg" />
</div>
<form id="newHotnessForm">
<label>Upload a Picture of Yourself</label>
<input type="file" id="imageUpload" size="20" />
<button type="submit" class="button">Save</button>
</form>
</div>
</body>
</html>