Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Форма для загрузки файла по ссылке (https://javascript.ru/forum/misc/72601-forma-dlya-zagruzki-fajjla-po-ssylke.html)

kupidon 11.02.2018 19:26

Форма для загрузки файла по ссылке
 
Всем доброго времени суток. Прошу помощи.
На странице редактирования товара интернет магазина есть две формы по загрузке фото к данному товару. Работать должна так: в первую форму можно вставить ссылку на фото с внешнего сайта, нажать кнопку "загрузить" и фото загрузится на сервер.
Во второй форме загрузка идет с выбором файлов с локального компьютера. (Но если вместо файла в нее вставить ссылку с внешнего сайта, то все тоже прекрасно загружается).
То есть обработчик второй формы (zagruzka_foto()) подходит и для загрузки по ссылке. Из второй формы берется var myfiles=$('#photoimg').prop('files') и отправляется в скрипт обработчик zagruzka_foto(myfiles) и дальше уже происходит загрузка.
Мне надо чтобы используя один js-обработчик первая форма тоже заработала. Где мне взять такой объект в первой форме, чтобы передать его в обработчик $('#photoimg').prop('files') ?




Вторая форма готова и полностью работает. Вот ее часть кода:
<form name="upload_form">
 <div id="imageloadbutton" style="display: block;">
    <input id="photoimg" name="photos[]" multiple="true" type="file">
 </div>
</form>
// функция ajax загрузки фото 
	 $('#photoimg').change(function() { 
                var myfiles = $('#photoimg').prop('files');
		zagruzka_foto(myfiles); // передаем объект Filelist в функцию для ajax отправки файлов на сервер 
	});


Первая форма:
<form id="load_pic">
 <input value="" title="Вставьте сюда прямую ссылку на фотографию товара с сайта поставщика" maxlength="300" id="sp_load_photo" style="height:20px;width:300px;" placeholder="Доступные форматы: gif, jpg, png, bmp" type="text">
 <input id="iditem" value="1898470" type="hidden"><input value="Закачать" onclick="zagruzka_foto();" type="button">
</form>


Упрощу вопрос:
Вторая форма рабочая. Берет значение $('#photoimg').prop('files') и отправляет его в функцию загрузки:zagruzka_foto(myfiles)
Первая форма не рабочая. Как и что нужно передать в функцию zagruzka_foto()?

laimas 11.02.2018 19:37

kupidon,
для загрузи файла из сети, не файлы на сервер надо грузить, а передавать текстовым поле url к этому файлу, загружать его уже будет сам сервер.

Leon-on12 11.02.2018 19:59

Первая самая очевидная вещь, что вы на onclick ничего в функцию zagruzka_foto не передаёте, хорошо бы туда передать значение из
<input value="" title="Вставьте сюда прямую ссылку на фотографию товара с сайта поставщика" maxlength="300" id="sp_load_photo" style="height:20px;width:300px;" placeholder="Доступные форматы: gif, jpg, png, bmp" type="text">

Второе:
Что бы не разбираться в функции zagruzka_foto() и рассмотрении как же эта функция ищет форму что бы её отправить, я бы обернул этой самой формой оба инпута, и засылал бы значение активированного.
<form name="upload_form">
    <div class="inputWrapper">
        <input value="" title="Вставьте сюда прямую ссылку на фотографию товара с сайта поставщика" maxlength="300" id="sp_load_photo" style="height:20px;width:300px;" placeholder="Доступные форматы: gif, jpg, png, bmp" type="text">
3
        <input id="iditem" value="1898470" type="hidden"><input value="Закачать" onclick="zagruzka_foto($('#sp_load_photo').prop('value'));" type="button">
    </div>
    <div id="imageloadbutton" style="display: block;">
        <input id="photoimg" name="photos[]" multiple="true" type="file">
    </div>
</form>

Не работал с атрибутом files, но что-то мне подсказывает что он идентичен пути по этому вместо .prop('files') используем .prop('value'), так же не очень люблю jQuery и написал бы чистое решение:
zagruzka_foto(documentGetElementById('sp_load_photo').value)

Не уверен что всё это будет работать, но я очень надеюсь, что хоть чем то помог.

kupidon 13.02.2018 19:44

Спасибо Вам за ответы, но что-то все равно не получается.
вот что я делаю: отправляю ссылку на картинку (с другого сайта) из инпута в функцию zagruzka_foto(). Но он не хочет такое отправлять на сервер.


llfoto="$('#sp_load_photo').prop('value')"


<form id="load_pic">
	<input value="" title="Вставьте сюда прямую ссылку на фотографию товара с сайта поставщика" maxlength="300" id="sp_load_photo" type="text" placeholder="Доступные форматы: gif, jpg, png, bmp">
	<input value="Закачать" onclick="zagruzka_foto('+llfoto+') type="button">
	</form>


// Функция загрузки фото 
function zagruzka_foto(myfiles){
	      function count(obj) {
	          var count = 0; 
	          for(var prs in obj) { 
	             if(obj.hasOwnProperty(prs)) count++;
	    	  } 
	          return count; 
	       }
	 
	    for(var i = 0; i < count(file_data); i++){
	    	var form_data = new FormData(); 
		var file_dat000 = myfiles[i];
	    form_data.append('file', file_dat000);
	    $.ajax({
	                url: 'include/upload_photo/ajax_upload.php',
	                dataType: 'text',
	                cache: false,
	                contentType: false,
	                processData: false,
	                data: form_data,
	                type: 'post',
	                beforeSend:function(){ },
	                success: function(response){  },
	                error: function(){   },
	                complete: function(){  },
	     });
		}



Почему при если инпут type="file" то загрузка происходит, а если =text то нет?
Может быть ссылку преобразовать в тип файл каким то образом? не понимаю как сделать ((

laimas 14.02.2018 06:52

Цитата:

Сообщение от kupidon
Может быть ссылку преобразовать в тип файл каким то образом?

Поле file не загружает сетевые файлы и подменить ему путь загрузки на свой произвольный нельзя, это политика безопасности.

Файлы выбранные пользователем, это будет $_FILES, а то что он выбрал по сети, это $_POST содержащий ссылку на источник. Серверу нужно получить файл по этому источнику - file_get_contents(url).

kupidon 14.02.2018 14:51

Смотрите: если я нажимаю кнопку обзор, открывается диалоговое окно для выбора локальных файлов. В это окно я вставляю ссылку на фото со стороннего сайта. Нажимаю ОК. И в этом случае фотка со стороннего сайта прекрасно грузится на сервер, как будто это локальный файл.

То есть нельзя подстроиться под действующую функцию загрузки?

laimas 14.02.2018 15:16

Цитата:

Сообщение от kupidon
Смотрите: если я нажимаю кнопку обзор, открывается диалоговое окно для выбора локальных файлов. В это окно я вставляю ссылку на фото со стороннего сайта.

Нет такого диалога.

Nexus 14.02.2018 15:26

Цитата:

Сообщение от laimas
Нет такого диалога.

Это стандартный диалог выбора файла.
Если туда ссылку на удаленный файл вставить, то он будет скачан и сохранен во временных файлах, а ссылка на него будет помещена в input file.

Alexandroppolus 14.02.2018 15:37

Цитата:

Сообщение от Nexus
Это стандартный диалог выбора файла.
Если туда ссылку на удаленный файл вставить, то он будет скачан и сохранен во временных файлах, а ссылка на него будет помещена в input file.

так во всех браузерах? впервые слышу про такое

Nexus 14.02.2018 15:43

Цитата:

Сообщение от Alexandroppolus
так во всех браузерах? впервые слышу про такое

Понятия не имею, сам только после прочтения шестого комментария и его проверки об этом узнал )


Часовой пояс GMT +3, время: 05:11.