использование отправки файла onchange для запуска загрузки AJAX файла - PullRequest
Новая
       5

использование отправки файла onchange для запуска загрузки AJAX файла

1 голос
/ 05 мая 2020

Мой первый пост здесь, у меня было несколько дней поиска решения моей текущей затруднительной ситуации. Я уверен, что здесь есть и другие более опытные программисты, чем я, поэтому я задаю этот вопрос сейчас!

Я новичок в попытках javascript, JQuery и AJAX, но я бы люблю иметь возможность узнать об этом больше. У меня есть годы самообучения по PHP и MySQL, но я всегда избегал javascript и c.

В настоящее время я работаю над хобби-проектом, создавая свою собственную CMS с использованием PHP.

Проблема, с которой я столкнулся, заключается в том, что я работаю над формой загрузки, которая работает нормально, и я получаю результат, который я получаю, если использую кнопку «Отправить» вручную. Однако я хочу скрыть ужасно выглядящий объект входного файла и вместо этого использовать метку. У меня ярлык работает, однако, когда я нажимаю кнопку «Открыть», AJAX не запускается.

Я совсем новичок от ie до AJAX, jquery и javascript. Раньше я избегал этого любой ценой, но решил, что мне НЕОБХОДИМО изучить его, чтобы быть в курсе последних событий.

Вот мой сценарий, большая часть которого была получена из Интернета. 

<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function (e) {
	$('#imageupload').on('submit',(function(e) {
		e.preventDefault();
		$.ajax({
        	url: \"upload.php\",
			type: \"POST\",
			data:  new FormData(this),
			contentType: false,
    	    cache: false,
			processData:false,
			success: function(data)
		    {
			$(\"#targetLayer\").html(data);
		    },
		  	error: function() 
	    	{
	    	} 	        
	   });
	}));
});
</script>
.image-upload
{   
    background-color: #eee;
    min-width: 100%;
    border-radius: 4px;
    margin-top: 10px;
    padding: 15px;
    padding-left: 6px;
    padding-right: 6px;
}
.image-upload img
{
    padding: 5px;
}
label {
   cursor: pointer;
}
<tr>
    <td class='image-upload'><div id='targetLayer'></div><label for='upload-photo'><img src='upload.png'></label></td>
    </tr>
</table></form>
<!-- Image upload form -->
      <!-- removed action='upload.php' as it is referenced in the AJAX code -->
    <form method='post' id='imageupload' enctype='multipart/form-data'>
        <table class='cards-table'>
        <tr>
        <td><input type=\"hidden\" name=\"id\" value=\"$next_id\">
        </td>
        </tr>
        <tr>
        <td><input type='file' name='file' id='upload-photo' onchange='submit()'>
        <input type='submit' value='Upload'>
        </td>
        </tr>
        </table>
    </form>

Мы будем очень благодарны за любую помощь или указатели!

...