我一直在尝试使用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>