Необходимо сделать загрузку картинки с показом превью до загрузки на сервере. Нашел пример
http://www.zurb.com/playground/ajax_upload. Однако он отказывается работать. Файл загружается на сервер, но превью показывать не хочет.
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="ajaxupload.js" type="text/javascript"></script>
<script src="scripts.js" type="text/javascript"></script>
</head>
<body>
<div class="preview">
<img width="100px" height="100px" src="" id="thumb" />
</div>
<form action="upload.php" id="newHotnessForm" enctype="multipart/form-data" method="post">
<input type="file" id="imageUpload" size="20" name="avatar" />
<button type="submit" class="button">Save</button>
</form>
</body>
</html>
spripts.js:
$(document).ready(function(){
var thumb = $('img#thumb');
new AjaxUpload('imageUpload', {
action: $('form#newHotnessForm').attr('action'),
name: 'avatar',
onSubmit: function(file, extension) {
$('div.preview').addClass('loading');
},
onComplete: function(file, response) {
thumb.load(function(){
$('div.preview').removeClass('loading');
thumb.unbind();
});
thumb.attr('src', response);
}
});
});
upload.php:
<?php
$uploaddir = "ok/";
//print_r($_FILES);
$temp=$_FILES['avatar']['name'];
$uploadfile = $uploaddir . $temp;
move_uploaded_file($_FILES['avatar']['tmp_name'], $uploadfile);
?>
ajaxupload.js:
http://www.zurb.com/javascripts/plugins/ajaxupload.js