Я пытаюсь передать изображение и значение поля заголовка в PHP, я обычно обрабатываю загрузку файлов прямо с помощью PHP с помощью массива $ _FILES, я не уверен, как создать / передать этот массив с помощью ajax для PHP. Моя форма:
<form role="form" name="updateProductForm" id="updateProductForm" method="POST" enctype="multipart/form-data"> <input name="imgOne" id="imgOne" type="file" title="Add Image"> <a class="btn btn-primary" name="updateProduct" id="updateProduct">Update Product</a></div> </form> И я пытаюсь использовать это для перехода к PHP:
$('#updateProduct').on('click', function() { try { ajaxRequest = new XMLHttpRequest(); } catch (e) { try { ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser broke!"); return false; } } } ajaxRequest.open("POST", "../Controller/ProductController.php", true); ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ajaxRequest.send("title=" + $("#title").val() + "&imgOne=" + $("#imgOne")); // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ console.log(ajaxRequest); } } });
В PHP я стараюсь:
if (isset($_POST["edit"])) { $id = $_POST["edit"]; $imgName = $_FILES["file"]["imgName"]; }
Юсеф
Я сделал это в одном из моих проектов, и следующий код работает для меня. Пожалуйста, внесите необходимые изменения в код в качестве вашей потребности.
Моя кнопка:
<form name="upload_img" enctype="multipart/form-data" id="upload_img"> <input type="file" style="display:none" id="upload-image" name="upload-image"></input> <button id="upload_image" type="button">Save</button> </form>
Мой JQuery / Ajax:
$('#upload_image').click(function() { var form = new FormData(document.getElementById('upload_img')); //append files var file = document.getElementById('upload-image').files[0]; if (file) { form.append('upload-image', file); } $.ajax({ type: "POST", url: "URL", data: form, cache: false, contentType: false, //must, tell jQuery not to process the data processData: false, //data: $("#upload_img").serialize(), success: function(data) { if(data == 1) $('#img_msg').html("Image Uploaded Successfully"); else $('#img_msg').html("Error While Image Uploading"); } }); //alert('names'); });
Вы можете использовать плагин для загрузки файлов jQuery
$('#imgOne').change(function(){ $.ajaxFileUpload({ fileElementId: 'imgOne', url: "../Controller/ProductController.php", dataType: 'json', success: function(response) { //Success Code Here }, error: function() { //Error Code Here } }); });