Загрузка изображений с помощью ajax

Я пытался создать форму и опубликовать данные в другом файле php через ajax. Это работало нормально, и это было круто. Данные были отправлены без перезагрузки страницы. Но теперь я добавил загрузку файла в эту форму, и теперь он не работает. Ошибка говорит undefined index: file. Я думаю, это потому, что я не использовал multipart/form-data. Как я могу это сделать без использования тега <form>? Я говорю это, потому что, если я использую <form>, страница будет перезагружена.Загрузка изображений с помощью ajax

Это мой код:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <title>Home | Facemash | Created by Incredible Saurav</title> 

    <!-- core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/main.css" rel="stylesheet"> 

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> 
<script> 
function sendContact() { 
    var valid; 
    valid = validateContact(); 
    if(valid) { 
     $.ajax({ 
     type:"POST", 
     url: "req.php", 
     data:'name1='+$("#name1").val()+'&email='+$("#email").val()+'&phone='+$("#phone").val()+'&file='+$("#file").val()+'&purpose='+$("#purpose").val()+'&message='+$("#message").val(), 
     success: function(data){ 
     $("#mail-status").html(data); 
     }, 
     error:function(){} 
     }); 
    } 
} 

function validateContact() { 
    var valid = true; 
    $(".demoInputBox").css('background-color',''); 
    $(".info").html(''); 

    if(!$("#name1").val()) { 
     $("#name1-info").html("<a style='font-size:14px;float:right;border-radius:5px;background-color:#c52d2f;width:50%;text-align:center;padding:3px;color:white'>Required</a>"); 
     $("#name1").css('background-color','#FFFFDF'); 
     valid = false; 
    } 

    if(!$("#email").val()) { 
     $("#email-info").html("<a style='font-size:14px;float:right;border-radius:5px;background-color:#c52d2f;width:50%;text-align:center;padding:3px;color:white'>Required</a>"); 
     $("#email").css('background-color','#FFFFDF'); 
     valid = false; 
    } 
    if(!$("#email").val().match(/^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/)) { 
     $("#email-info").html("<a style='font-size:14px;float:right;border-radius:5px;background-color:#c52d2f;width:50%;text-align:center;padding:3px;color:white'>Invalid</a>"); 
     $("#email").css('background-color','#FFFFDF'); 
     valid = false; 
    } 
    if(!$("#phone").val()) { 
     $("#phone-info").html("<a style='font-size:14px;float:right;border-radius:5px;background-color:#c52d2f;width:50%;text-align:center;padding:3px;color:white'>Required</a>"); 
     $("#phone").css('background-color','#FFFFDF'); 
     valid = false; 
    } 
    if(!$("#file").val()) { 
     $("#file-info").html("<a style='font-size:14px;float:right;border-radius:5px;background-color:#c52d2f;width:50%;text-align:center;padding:3px;color:white'>Required</a>"); 
     $("#file").css('background-color','#FFFFDF'); 
     valid = false; 
    } 
    if(!$("#message").val()) { 
     $("#message-info").html("<a style='font-size:14px;float:right;border-radius:5px;background-color:#c52d2f;width:50%;text-align:center;padding:3px;color:white'>Required</a>"); 
     $("#message").css('background-color','#FFFFDF'); 
     valid = false; 
    } 
    if(!$("#purpose").val()) { 
     $("#purpose-info").html("<a style='font-size:14px;float:right;border-radius:5px;background-color:#c52d2f;width:50%;text-align:center;padding:3px;color:white'>Are you kidding me ?</a>"); 
     $("#purpose").css('background-color','#FFFFDF'); 
     valid = false; 
    } 

    return valid; 
} 
</script> 
    </head><!--/head--> 
<body> 
    <section id="contact-page"> 
     <div class="container"> 
      <div class="row contact-wrap"> 
           <div id="frmContact"> 
           <div id="mail-status"></div> 

        <div class="col-sm-5 col-sm-offset-1"> 
         <div class="form-group"> 
          <label style="font-size:15px">Name</label> 
          <span id="name1-info" class="info"></span> 
          <input type="text" name="name1" id="name1" class="form-control" placeholder="Please enter your Name"> 
         </div> 
         <div class="form-group"> 
          <label style="font-size:15px">Email</label> 
          <span id="email-info" class="info"></span> 
          <input type="email" name="email" id="email" class="form-control" placeholder="Please enter your Email"> 
         </div> 
         <div class="form-group"> 
          <label style="font-size:15px">Phone</label> 
          <span id="phone-info" class="info"></span> 
          <input type="number" name="phone" id="phone" class="form-control" placeholder="Please enter your Phone no."> 
         </div> 

        </div> 
        <div class="col-sm-5"> 
         <div class="form-group"> 
          <label style="font-size:15px">Purpose</label> 
          <span id="purpose-info" class="info"></span> 
          <select type="text" name="purpose" id="purpose" class="form-control" > 
           <option value="2">To add a Picture</option> 
           <option value="0">To remove a Picture</option></select> 
         </div> 
         <div class="form-group"> 
          <label style="font-size:15px">Upload </label> 
          <span id="file-info" class="info"></span> 
          <input type="file" name="file" id="file" class="form-control"> 
         </div> 
         <div class="form-group"> 
          <label style="font-size:15px">Message</label> 
          <span id="message-info" class="info"></span> 
          <textarea name="message" id="message" required="required" class="form-control" rows="2" placeholder="Please enter your message" ></textarea> 
         </div>       
         <div class="form-group"> 
          <button type="submit" name="submit" class="btn btn-primary btn-lg" onClick="sendContact();">Submit Message</button> 
         </div> 
        </div> 

       </div> 
      </div> <!--/.row--> 
     </div><!--/.container--> 
    </section><!--/#contact-page--> 

    <script src="js/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

И это мой req.php файл, в котором она размещена:

<?php 
$purpose = $_REQUEST['purpose']; 
$name1 = $_REQUEST['name1']; 
$name = $_FILES['file']['name']; 
$tmp_name = $_FILES['file']['tmp_name']; 
$email = $_REQUEST['email']; 
$phone = $_REQUEST['phone']; 
$message = $_REQUEST['message']; 
$data = "Name: $name1\nEmail: $email\nPhone: $phone\nPurpose: $purpose\nFilename: $name\nMessage: $message\n\n----------------------\n--------------------\n\n"; 

$fh = fopen("requests.txt", "a"); 

if(fwrite($fh,$data)==false) 
{ 
    fclose($fh); 
    echo "<p style='background-color:red;color:white;width:100%;padding:5px'>Error occurred while writing to file !</p>"; 
} 
else 
{ 
    fclose($fh); 
     if (isset($name)) { 
    if(!empty($name)) { 
     $location = 'uploads/'; 
    if (move_uploaded_file($tmp_name, $location.$name)) { 
     echo "<br><br><p style='background-color:green;color:white;width:100%;padding:5px'>Your picture was added successfully !</p>"; 
    }else{ 
     echo 'please chose a file.'; 
    } 
    } 
} 
    echo "<br><br><p style='background-color:green;color:white;width:100%;padding:5px'>Your picture was added successfully !</p>"; 
} 


?>

источник

2015-07-06 Divya Kumari

Вы не можете просто использовать AJAX для загрузки файла. Чтобы страница не перезагружалась, вы регистрируете событие, которое отправляет данные формы, и используйте 'preventDefault()', чтобы остановить нормальное действие этого события. Поскольку вы используете jQuery, вы должны избавиться от любого встроенного JS и cpature evnts в коде jQuery, с которым легче справиться. –

Все было нормально, пока «вы не можете просто использовать AJAX для загрузки файла», но после того, что вы сказали, вскочил с моей головы –

Посмотрите на [это] (http://www.peachpit.com/articles/article.aspx ? р = 1766159). –

-1

Если вы используете AJAX, вы не будете нуждаться в форме, он избыточен.

Пример того, что вы должны иметь:

Html структура:

<div> 
    <input type="text" id="name"/> 
    <input type='file' accept='image/png,image/jpg,image/jpeg,image/bmp' id='image'> 

    <button id="send">Send</button> 
</div>

JQuery структура:

var image = null; 

$(document).on('change', '#image', function(event) 
{ 
    image = event.target.files; 
}); 

$(document).on('click', '#send', function(event) 
{ 
    event.stopPropagation(); 
    event.preventDefault(); 

    var data = new FormData(); 

    $.each(image, function (key, value) 
    { 
     data.append('image', value); 
    }); 

    data.append('name', $('#name').val()); 

    $.ajax(
    { 
     url: yourUrl, 
     type: 'POST', 
     data: data, 
     cache: false, 
     processData: false, 
     contentType: false, 
     success: function(response) 
     { 

     } 
    }); 
});

В PHP, вам просто нужно print_r($_FILES) и print_r($_POST) к знайте, какие ценности вы можете получить, и k с.

Но я могу сказать вам прямо сейчас, что вы будете получать доступ к $_FILES['image'][], так как это было имя, которое я установил как ID.

источник

2015-07-06 17:17:45 Linesofcode

Почему форма избыточна с AJAX? –

Форма должна переадресовать вас куда-то, чего вы не хотите. Поэтому использование формы в этой ситуации не даст вам никаких лучших результатов. – Linesofcode

Но вы используете элементы формы? Без тега формы HTML будет недействительным. –

Загрузка изображений с помощью ajax

ответ

Смежные вопросы