Мне нужно загрузить изображение, а затем отобразить миниатюру предварительного просмотра изображения на той же странице (#AJAX). может ли кто-нибудь предоставить мне некоторые указатели?Получить предварительный просмотр изображения при загрузке
1
A
ответ
0
Несомненно. Предположительно, сервер, который вы загружаете, где-то хранит изображение и делает его доступным через некоторый URL. Если это так, то все, что вам нужно сделать, - это вернуть сервер URL-адреса изображения в ответ на запрос на загрузку, а затем добавить JavaScript, который добавит новый тег <img>
к документу, который указывает на изображение на сервере.
Чтобы сохранить полосу пропускания, вы можете также изменить размер изображения до соответствующего размера эскиза (используя что-то вроде ImageMagick) и отправить URL-адрес миниатюры вместо URL-адреса для полноразмерного изображения.
2
index.html
<script>
function ajaxFileUpload(upload_field)
{
// Checking file type
var re_text = /\.jpg|\.gif|\.jpeg/i;
var filename = upload_field.value;
if (filename.search(re_text) == -1) {
alert("File should be either jpg or gif or jpeg");
upload_field.form.reset();
return false;
}
document.getElementById('picture_preview').innerHTML = '<div><img src="images/progressbar.gif" border="0" /></div>';
upload_field.form.action = 'upload-picture.php';
upload_field.form.target = 'upload_iframe';
upload_field.form.submit();
upload_field.form.action = '';
upload_field.form.target = '';
return true;
}
</script>
<!-- iframe used for ajax file upload-->
<!-- debug: change it to style="display:block" -->
<iframe name="upload_iframe" id="upload_iframe" style="display:none;"></iframe>
<!-- iframe used for ajax file upload-->
<form name="pictureForm" method="post" autocomplete="off" enctype="multipart/form-data">
<div>
<span>Upload Picture :</span>
<input type="file" name="picture" id="picture" onchange="return ajaxFileUpload(this);" />
<span id="picture_error"></span>
<div id="picture_preview"></div>
</div>
</form>
загрузки-picture.php
<?php
$upload_dir = 'upload/'; // Directory for file storing
$preview_url = 'http://localhost/image_upload/upload/';
$filename= '';
$result = 'ERROR';
$result_msg = '';
$allowed_image = array ('image/gif', 'image/jpeg', 'image/jpg', 'image/pjpeg','image/png');
define('PICTURE_SIZE_ALLOWED', 2242880); // bytes
if (isset($_FILES['picture'])) // file was send from browser
{
if ($_FILES['picture']['error'] == UPLOAD_ERR_OK) // no error
{
if (in_array($_FILES['picture']['type'], $allowed_image)) {
if(filesize($_FILES['picture']['tmp_name']) <= PICTURE_SIZE_ALLOWED) // bytes
{
$filename = $_FILES['picture']['name'];
move_uploaded_file($_FILES['picture']['tmp_name'], $upload_dir.$filename);
//phpclamav clamscan for scanning viruses
//passthru('clamscan -d /var/lib/clamav --no-summary '.$upload_dir.$filename, $virus_msg); //scan virus
$virus_msg = 'OK'; //assume clamav returing OK.
if ($virus_msg != 'OK') {
unlink($upload_dir.$filename);
$result_msg = $filename." : ".FILE_VIRUS_AFFECTED;
$result_msg = '<font color=red>'.$result_msg.'</font>';
$filename = '';
}else {
// main action -- move uploaded file to $upload_dir
$result = 'OK';
}
}else {
$filesize = filesize($_FILES['picture']['tmp_name']);// or $_FILES['picture']['size']
$filetype = $_FILES['picture']['type'];
$result_msg = PICTURE_SIZE;
}
}else {
$result_msg = SELECT_IMAGE;
}
}
elseif ($_FILES['picture']['error'] == UPLOAD_ERR_INI_SIZE)
$result_msg = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
else
$result_msg = 'Unknown error';
}
// This is a PHP code outputing Javascript code.
echo '<script language="JavaScript" type="text/javascript">'."\n";
echo 'var parDoc = window.parent.document;';
if ($result == 'OK') {
echo 'parDoc.getElementById("picture_error").innerHTML = "";';
}
else {
echo "parDoc.getElementById('picture_error').innerHTML = '".$result_msg."';";
}
if($filename != '') {
echo "parDoc.getElementById('picture_preview').innerHTML = '<img src=\'$preview_url$filename\' id=\'preview_picture_tag\' heigh=\'100\' width=\'100\' name=\'preview_picture_tag\' />';";
}
echo "\n".'</script>';
exit(); // do not go futher
?>
сделать две папки
images -- keep any loading image.
upload -- change permission.
Поместите все эти файлы в
image_upload
images
upload
index.html
upload-picture.php
Смежные вопросы
- 1. Предварительный просмотр изображения при загрузке изображения
- 2. Получить предварительный просмотр изображения?
- 3. angularjs Предварительный просмотр несколько изображений изображения при загрузке
- 4. Угловое хранилище 2-го уровня - предварительный просмотр изображения при загрузке
- 5. Как показать предварительный просмотр изображения при загрузке на Android?
- 6. Предварительный просмотр последнего загруженного изображения
- 7. iPhone - предварительный просмотр изображения
- 8. Предварительный просмотр изображения
- 9. Предварительный просмотр изображения при нажатии - Android
- 10. Azure медиапроигрыватель Предварительный просмотр изображения
- 11. Предварительный просмотр изображения в Flex
- 12. Предварительный просмотр изображения в списке
- 13. Dropzone.js Предварительный просмотр изображения позиционирования
- 14. Получить предварительный просмотр экрана?
- 15. генерировать предварительный просмотр BMP-изображения
- 16. Предварительный просмотр изображения перед загрузкой
- 17. Как показать предварительный просмотр изображения
- 18. Предварительный просмотр изображения readonly/disabled
- 19. Предварительный просмотр загруженного файла (изображения)
- 20. Как показать предварительный просмотр изображения?
- 21. Предварительный просмотр изображения перед загрузкой
- 22. Предварительный просмотр изображения перед сохранением
- 23. TKinter: Предварительный просмотр изображения - Кнопки
- 24. Предварительный просмотр изображения перед загрузкой?
- 25. Предварительный просмотр изображения в javascript
- 26. Предварительный просмотр камеры не отображается при первой загрузке на Android
- 27. Показать предварительный просмотр изображения до загрузки
- 28. QVideoWidget Предварительный просмотр видео
- 29. Предварительный просмотр Перед загрузкой файла
- 30. iPhone: Получить предварительный просмотр камеры
Вам не нужно присылать форму (перезагрузить страницу), чтобы загрузить изображение? Или я что-то упускаю из-за того, как работает ваш код? – Ben
это звучит как сложная часть для меня. я не знаком, но я думаю, что есть способы обойти это. http://www.openjs.com/articles/ajax/ajax_file_upload/ –