Добрый день! Стоит такая задача: загружать графические файлы поочередно таким образом, чтобы загружаемый файл замещал предшествующий (см. скриншоты). Код файла такой: HTML: <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ajaxupload.3.5.js"></script> <script type="text/javascript" > $(function(){ var btnUpload=$('#upload'); var status=$('#status'); new AjaxUpload(btnUpload, { action: 'upload-file-2.php', name: 'uploadfile', onSubmit: function(file, ext){ if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ // extension is not allowed status.text('Поддерживаемые форматы JPG, PNG или GIF'); return false; } status.text('Загрузка...'); }, onComplete: function(file, response){ //On completion clear the status status.text(''); //Add uploaded file to list if(response==="success"){ $('#files').html('<li><img src="./intro/'+file+'" alt="" /><br />'+file+'</li>').addClass('success'); } else{ $('<li></li>').appendTo('#files').text('Файл не загружен' + file).addClass('error'); } } }); }); </script> </head> <body> <div id="mainbody" > <h3>Звгрузка графики</h3> <!-- Upload Button, use any id you wish--> <div id="upload" ><span>Выбрать файл<span></div><span id="status" ></span> <ul id="files" ></ul> </div> Код загрузчика upload-file-2.php: PHP: $user_id = 12; // Для настройки. На практике берем из сессии $data_img = getimagesize($_FILES['uploadfile']['tmp_name']); // Размер и тип изображения $type_img = [1 => 'gif', 2 => 'jpg', 3 => 'png']; $type = $type_img[$data_img[2]]; // Тип изображения $upload_dir = $_SERVER['DOCUMENT_ROOT']."/intro/"; // Директория для записи изображения // Создаем уникальное имя файла изображения $file_name = $user_id . "-" . mt_rand(5000, 99000) . '.'.$type; // Без переименования файла изображения $file_name = $uploaddir . basename($_FILES['uploadfile']['name']); // Сохраняем это имя в текстовом файле. В реале сохраняется в базе file_put_contents($user_id.'.txt', $file_name); $new_image = $upload_dir.$file_name; // Адрес изображения move_uploaded_file($_FILES["uploadfile"]["tmp_name"], $new_image); // Перемещение на место хранения echo "success"; В таком виде нормально работает. Но на практике требуется переименовать загружаемый файл, присвоив ему уникальное имя. Для этого в данном примере нужно закомментировать строку $file_name = $uploaddir... . В этом случае файл с заданным именем успешно создается, но на странице не показывается (скриншот). Я так понимаю, что JS скрипт такой файл графики не видит. Как добиться того, чтобы переименованные графические файлы тоже показывались?
HTML: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ajaxupload.3.5.js"></script> <script type="text/javascript" > $(function(){ var btnUpload=$('#upload'); var status=$('#status'); new AjaxUpload(btnUpload, { action: 'upload-file-2.php', name: 'uploadfile', onSubmit: function(file, ext){ if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ // extension is not allowed status.text('Поддерживаемые форматы JPG, PNG или GIF'); return false; } status.text('Загрузка...'); }, onComplete: function(file, response){ //On completion clear the status status.text(''); //Add uploaded file to list let result = {success: false, file_name: undefined, ...JSON.parse(response)} if(result.success){ $('#files').html(`<li><img src="./intro/${result.file_name}" alt="" /><br />${result.file_name}</li>`).addClass('success'); } else{ $('<li></li>').appendTo('#files').text('Файл не загружен' + file).addClass('error'); } } }); }); </script> </head> <body> <div id="mainbody" > <h3>Звгрузка графики</h3> <!-- Upload Button, use any id you wish--> <div id="upload" ><span>Выбрать файл<span></div><span id="status" ></span> <ul id="files" ></ul> </div> PHP: <?php $user_id = 12; // Для настройки. На практике берем из сессии $data_img = getimagesize($_FILES['uploadfile']['tmp_name']); // Размер и тип изображения $type_img = [1 => 'gif', 2 => 'jpg', 3 => 'png']; $type = $type_img[$data_img[2]]; // Тип изображения $upload_dir = $_SERVER['DOCUMENT_ROOT']."/intro/"; // Директория для записи изображения // Создаем уникальное имя файла изображения $file_name = $user_id . "-" . mt_rand(5000, 99000) . '.'.$type; // Без переименования файла изображения //$file_name = $uploaddir . basename($_FILES['uploadfile']['name']); // Сохраняем это имя в текстовом файле. В реале сохраняется в базе file_put_contents($user_id.'.txt', $file_name); $new_image = $upload_dir.$file_name; // Адрес изображения move_uploaded_file($_FILES["uploadfile"]["tmp_name"], $new_image); // Перемещение на место хранения exit(json_encode(['success' => true, 'file_name' => $file_name]));
Спасибо, очень хорошо получилось! Но вскрылся один нюанс: хотелось бы иметь крестик для закрытия картинки, по клику на который одновременно запускался бы php-файл, удаляющий соответствующий графический файл. Как сделать этот php-файл я понимаю, а вот с Крестиком, его запускающим и закрывающим картинку, не выходит. Как это осуществить? Код (CSS): #upload{ margin:10px 30px; padding:10px; font-weight:bold; font-size:12px; font-family:Arial, Helvetica, sans-serif; text-align:center; background:#f2f2f2; color:#3366cc; border:1px solid #ccc; width:140px; } #status{ font-family:Arial; padding:5px; } ul#files{ list-style:none; padding:0; margin:0; } ul#files li{ padding:10px; margin-bottom:2px; width:200px; float:left; margin-right:10px;} ul#files li img{ max-width:160px; max-height:150px; }
Например навешать на li data атрибут с именем файла и передавать на сервер. HTML: $('#files').html(`<li data-file="${result.file_name}"><img src="./intro/${result.file_name}" alt="" /><br />${result.file_name} <button class="js_remove_image">Удалить</button></li>`).addClass('success') HTML: $(document).on('click', '.js_remove_image', function(e){ let $this = $(e.target); let file = $this.closest('li').data('file'); запрос на сервер ... });
К сожалению, я этого не понял. Предположим, что на сервере нужно запустить файл с именем clear.php. Он из базы найдет возьмет имя нужного графического файла и удалит его. Но как clear.php вписать в скрипт? HTML: <script type="text/javascript" > $(function(){ var btnUpload=$('#upload'); var status=$('#status'); new AjaxUpload(btnUpload, { action: 'upload-file-5.php', name: 'uploadfile', onSubmit: function(file, ext){ if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ // extension is not allowed status.text('Поддерживаемые форматы JPG, PNG или GIF'); return false; } status.text('Загрузка...'); }, onComplete: function(file, response){ //On completion clear the status status.text(''); //Add uploaded file to list let result = {success: false, file_name: undefined, ...JSON.parse(response)} if(result.success){ $('#files').html(`<li data-file="${result.file_name}"><img src="./intro/${result.file_name}" alt="" /><br />${result.file_name} <button class="js_remove_image">Удалить</button></li>`).addClass('success'); } else{ $('<li></li>').appendTo('#files').text('Файл не загружен' + file).addClass('error'); } } }); }); </script>
Получилось грубовато. Но по сути, тебе правильно ответили: уже хватит задавать вопросы такого уровня, мнэ... некомпетентности. Так же, как ты обращался любому другому php-скрипту. В твоём распоряжении есть get и post запросы. Почитай про это самостоятельно.
Я не нашел в Правилах требований к уровню компетенции вопросов. Но если Вы так считаете, то не буду - с Модератором не спорят.
@Vladd55, ни в коем случае не хотел наехать, просто кучу информации можно найти пользуясь поисковыми системами.
Я не профессионал, я психолог, и для меня JS чрезвычайно труден. На мой взгляд, нет ничего плохого, если бы мне, неумехе, Aleksandr.B написал бы рабочий код. Тем более, что он готов был это сделать, а Вы дали ему по рукам. Зачем? Кто от этого выиграл, в чем польза этих Ваших действий? Это еще как-то можно было понять, если бы шел огромный поток вопросов от других людей. Но их же совсем немного! Ну, я соберу все полученные здесь заготовки, пойду на другой форум и заново все объясню другим людям. Они помогут. Но в чем смысл всех этих дополнительных действий, когда этот ответ я мог бы получить здесь уже сегодня?
@Vladd55 главный принцип форума: здесь не кормят рыбой, а учат её ловить. И то необязательно, а по настроению. Подразумевается что каждый ответ служит тебе уроком. Отсюда это вот всё. Удачи в учёбе! --- Добавлено --- Ты не JS учишь, ты борешся со своим незнанием принципов работы веб. "Обратиться к скрипту php" значит сделать запрос на сервер. Некоторые запросы вроде получения html или png файла обрабатываются веб-сервером, а некоторые передаются на исполнение php. Ты уже обращался к скрипту PHP из JS. Я помню твои затруднения с заменой формы. Здесь то же самое. Ты же не собираешся задавать этот вопрос про каждый новый скрипт на сервере — а как тебе его вызвать из JS?! )) --- Добавлено --- Как психолог, проанализируй свою обиду и пойми, что никто тебе ничего не должен. А коммуникации проходят легко только если нет взаимных претензий.
Ни про какие обиды не может быть и речи. И никаких претензий тем более. В каждом монастыре свой Устав. Действуйте, как считаете нужным - это же ваш сайт. Александру, который мне помог, я написал в личку благодарность. Бидону поставил плюсик. Модератору ответил, что подчиняюсь его требованию. Всё нормально. Мы же все независимые, свободные люди. К тому же, мою проблему мне уже решили, так что жизнь продолжается, идем дальше.