Я пытаюсь загрузить изображение в папку с изображениями с помощью ajax, но не работает, когда я выбираю изображение, тогда изображение должно быть загружено в мою папку на локальном жестком диске, и я буду использовать его.
пожалуйста, помогите мне
Мой код:
SCRIPT
$(document).ready(function() { $('#pathAbout,#path,#pathWork').change(function(){ if($(this).val() !=""){ $.ajax({ type: "POST", url: "imageLoad.php", data: "name = <?php echo $_FILES['imgPath']['name']; ?>&type=<?php echo $_FILES['imgPath']['type']; ?>&tmp_name=<?php echo $_FILES['imgPath']['tmp_name']; ?>", success: function(msg){ alert(msg); } }); } }); }); </script> HTML
<form method="POST" action="tabs.php?page=HOME" enctype="multipart/form-data"> <table> <tr> <td><label>Choose Image</label></td> <td><input type="file" id ="pathAbout" name="imgPath" /></td> </tr> </table> </form>
PHP
if(!empty($_POST)) { if((isset($_POST['name']) && $_POST['name'] != '') || (isset($_POST['type']) && $_POST['type'] != '') ||(isset($_POST['tmp_name']) && $_POST['tmp_name'] != '')) { $name = $_POST['name']; $type = $_POST['type']; $tmp_name = $_POST['tmp_name']; $extension = strtolower(substr($name, strpos($name , '.') +1)); if(($extension == 'png' || $extension == 'jpeg' || $extension == "jpg")&&($type == "image/png" || $type == "image/jpeg" || $type == "image/jpg")) { $location = 'images/'; if(move_uploaded_file($tmp_name,$location."$name")) { echo "Loaded"; } else { echo "Error occured"; } } else { echo "Unsupported file format"; } } else { echo "Please choose a file"; } } else { echo "No Information found"; }
Это мой код, но ничего не происходит, когда я выбираю файл
Если вы хотите, вы можете использовать Uploadify здесь, вы также можете увидеть демонстрацию и пример кода для eg-
$(function() { $("#file_upload").uploadify({ 'formData' : {'someKey' : 'someValue', 'someOtherKey' : 1}, 'swf' : '/uploadify/uploadify.swf', 'uploader' : '/uploadify/uploadify.php', 'onUploadStart' : function(file) { $("#file_upload").uploadify("settings", "someOtherKey", 2); } }); }); $("#image_upload2").uploadify(uploadifyBasicSettingsObj); uploadifyBasicSettingsObj.onUploadSuccess = function(file, data, response) { $('.tempImageContainer2').find('.uploadify-overlay').show(); /* Here you actually show your uploaded image.In my case im showing in Div */ $('.tempImageContainer2').attr('style','background- image:url("../resources/temp/thumbnail/'+data+'")'); $('#hidden_img_value2').attr('value',data); }
Код HTML:
<div class="boxWrapper tempImageContainer2" data-image-container-id="2"> <input type="file" accept="gif|jpg" name="image2" style="" id="image_upload2"/> <input type="hidden" value="" name="image[]" id="hidden_img_value2"> <input type="hidden" name="upload_path" value="" id="upload_path2" class="upload_path"> <div class="uploadify-overlay">Change</div> <a class="remove-pic-link" href="javascript:void(0)" style="display:none">Remove</a> </div>
Невозможно загрузить изображение напрямую с помощью AJAX, но есть некоторые библиотеки, которые создают динамические фреймы для выполнения этого.
Проверьте это, который я использовал в нескольких проектах: valums.com/ajax-upload . Он даже поставляется с примером serveride-кода для нескольких фреймворков PHP-приложений.
Вы не можете загружать файл с помощью AJAX , вам нужно использовать трюк, состоящий из 'iframe' и web form , а также некоторого javascript .
Эта ссылка может вам помочь.
HTML
<div class="field"> <label class="w15 left" for="txtURL">Logo:</label> <img id="logoPreview" width="150px" height="150px" src='default.jpg' /> <input class="w60" type="file" name="txtURL" id="txtURL" /> </div>
JQuery
$('#txtURL').on('change', function(){ $.ajaxFileUpload({ type : "POST", url : "ajax/uploadImage", dataType : "json", fileElementId: 'txtURL', data : {'title':'Image Uploading'}, success : function(data){ $('#logoPreview').attr('src', data['path']); }, error : function(data, status, e){ alert(e); } }); });
Контроллер Ajax:
public function uploadImage() { $status = ""; $msg = ""; $filename=''; $file_element_name = 'txtURL';//Name of input field if (empty($_POST['title'])){ $status = "error"; $msg = "Please enter a title"; } if ($status != "error"){ $targetPath = ''.date('Y').'/'.date('m').'/'; if(!file_exists(str_replace('//','/',$targetPath))){ mkdir(str_replace('//','/',$targetPath), 0777, true); } $config['upload_path'] = $targetPath; $config['allowed_types'] = 'jpg|png|jpeg'; $config['max_size'] = 150000; $config['file_name']=time(); //File name you want $config['encrypt_name'] = FALSE; $this->load->library('upload', $config); $this->upload->initialize($config); if(!$this->upload->do_upload($file_element_name)){ $status = 'error'; $msg = $this->upload->display_errors('', ''); } else{ $data = $this->upload->data(); $filename = $targetPath.$data['file_name']; } //@unlink($_FILES[$file_element_name]); } echo json_encode(array('status' => $status, 'msg' => $msg,'path'=>$filename)); }
Добавить Ajaxfileupload.js
Вы не можете загружать изображение напрямую с помощью AJAX
Ответ в ответ на это:
data: "name = <?php echo $_FILES['imgPath']['name']; ?>&type=<?php echo $_FILES['imgPath']['type']; ?>&tmp_name=<?php echo $_FILES['imgPath']['tmp_name']; ?>",