Как загрузить изображение через jQuery Steps

Question

Как загрузить изображение через jQuery Steps

Я знаю, как загрузить изображение с помощью AJAX, но я хочу загрузить изображение с помощью шагов JQuery. Я пробовал несколько способов, но это не работает. если кто-нибудь сделал это, пожалуйста, помогите мне. Поблагодарить

HTML

<input type="file" style="background-color: #2184b3; color: #fff;" class="btn btn-default" name="upload_doc" id="upload_doc" title="Search for a file to add">

JQuery

if(currentIndex == 0)
{
var upload_doc = $("#upload_doc").val();event.preventDefault();
$.ajax({
async: false,
url: myUrl,
dataType: 'json',
type: 'POST',
cache: false,
contentType: false,
processData: false,
data : {  upload_doc : upload_doc, step1 : step1},
success: function(response) {
console.log(response);
}

3

html jquery-steps php

Решение

Другие решения

Из вашего комментария

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

Если вы загружаете файл вместе с другими входными значениями через AJAX, используйте FormData объект. Но имейте в виду, что старые браузеры не поддерживают объект FormData, поддержка FormData начинается со следующих версий браузеров: IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+.

Так что ваш jQuery должен быть таким:

if(currentIndex == 0){
event.preventDefault();
var formData = new FormData($('form')[0]);
$.ajax({
async: false,
url: myUrl,
dataType: 'json',
type: 'POST',
cache: false,
contentType: false,
processData: false,
data : formData,
success: function(response) {
console.log(response);
}
});
}

0

Источник

Accepted Answer

Следуйте по этому пути для загрузки изображения, таким образом, вы не хотите HTML form,

Добавьте этот код к вашему mainpage.php

<input type="file" name="upload_doc" id="upload_doc" title="Search for a file to add"/>
<input id="uploadImage" type="button" value="Upload Image" name="upload"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery('#uploadImage').on("click", function (e) {
var uploadedFile = new FormData();
uploadedFile.append('upload_doc', upload_doc.files[0]);
jQuery.ajax({
url: 'lab1.php',
type: 'POST',
processData: false, // important
contentType: false, // important
dataType : 'json',
data: uploadedFile
});
});
</script>

Затем добавьте это для upload.php

<?php
// check record array
print_r($_FILES);
move_uploaded_file($_FILES['upload_doc']['tmp_name'], $_FILES['upload_doc']['name']);
?>

1