что делать, если я не могу загрузить изображение в форме, которую он успешно создал, но файл показывает 0, а не файл загрузки. пожалуйста, помогите мне заблаговременно!
сценарий, где я могу обновить и добавить одну форму с загрузкой
<script type="text/javascript"> var save_method; //for save method string var table; $(document).ready(function() { table = $('#dataTable2').DataTable({ "processing": true, //Feature control the processing indicator. "serverSide": true, //Feature control DataTables' server-side processing mode. // Load data for the table's content from an Ajax source "ajax": { "url": "<?php echo site_url('about/ajax_list')?>", "type": "POST" }, //Set column definition initialisation properties. "columnDefs": [ { "targets": [ -1 ], //last column "orderable": false, //set not orderable }, ], }); }); function add_person() { save_method = 'add'; $('#form')[0].reset(); // reset form on modals $('#myModal').modal('show'); // show bootstrap modal $('.modal-title').text('Add About US'); // Set Title to Bootstrap modal title } function edit_person(about_id) { save_method = 'update'; $('#form')[0].reset(); // reset form on modals //Ajax Load data from ajax $.ajax({ url : "<?php echo site_url('about/ajax_edit/')?>/" + about_id, type: "GET", dataType: "JSON", success: function(data) { $('[name="about_id"]').val(data.about_id); $('[name="about_details"]').val(data.about_details); $('[name="images"]').val(data.image); $('#myModal').modal('show'); // show bootstrap modal when complete loaded $('.modal-title').text('Edit Person'); // Set title to Bootstrap modal title }, error: function (jqXHR, textStatus, errorThrown) { alert('Error get data from ajax'); } }); } function reload_table() { table.ajax.reload(null,false); //reload datatable ajax } function save() { var url; if(save_method == 'add') { url = "<?php echo site_url('about/ajax_add')?>"; } else { url = "<?php echo site_url('about/ajax_update')?>"; } // ajax adding data to database $.ajax({ url : url, type: "POST", data: $('#form').serialize(), dataType: "JSON", success: function(data) { //if success close modal and reload ajax table $('#myModal').modal('hide'); reload_table(); if (empty($_FILES['image'])) { return FALSE; } }, error: function (jqXHR, textStatus, errorThrown) { alert('Error adding / update data'); } }); } function delete_person(about_id) { if(confirm('Are you sure delete this data?')) { // ajax delete data to database $.ajax({ url : "<?php echo site_url('about/ajax_delete')?>/"+about_id, type: "POST", dataType: "JSON", success: function(data) { //if success reload ajax table $('#myModal').modal('hide'); reload_table(); }, error: function (jqXHR, textStatus, errorThrown) { alert('Error adding / update data'); } }); } }
Это моя форма
<div class="modal-body form"> <form action="#" id="form"> <input type="hidden" value="" name="about_id"/> <!-- <div class="form-group has-feedback "> <label>Date</label> <input type="date" id="date" class="form-control" input-sm placeholder="Date"/> </div>--> <div class="form-group has-feedback"> <label>About Details</label> <input type="text" id="title" name="about_details" class="form-control" input-sm placeholder="About Details"/> </div> <!-- Description --> <div class="form-group has-feedback"> <label>Image</label> <?php $attrib = array('type'=>'text','name'=>'image','class'=>'form-control','id'=>'file'); ?> <?php echo form_upload( $attrib,set_value('image')); ?>
</form> <div class="modal-footer"> <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button> <button type="button" id="btnSave" class="btn btn-success" aria-hidden="true" onclick="save()">Save</button>
мой контроллер для добавления и обновления
public function ajax_add() { $data = array( 'about_details' => $this->input->post('about_details'), 'image' => $this->upload->do_upload('image'), ); $insert = $this->person->save($data); echo json_encode(array("status" => TRUE)); } public function ajax_update() { $data = array( 'about_details' => $this->input->post('about_details'), 'image' => $this->upload->do_upload('image'), ); $this->person->update(array('about_id' => $this->input->post('about_id')), $data); echo json_encode(array("status" => TRUE)); }
То, что я узнал при загрузке через ajax в CodeIgniter, заключается в том, что при отправке формы изображения не загружаются. Из-за этого я использовал дополнительный файл js «jquery.form.min.js», и загрузка ajax прошла хорошо. Чтобы реализовать его, сценарий будет выглядеть так:
$('#uploadimg').ajaxForm({ //uploadimg is my form id dataType: 'json', success: processJson }); function processJson(data) { if(data.msg=="success"){ alert('Upload is successful.'); } else{ alert('Upload couldn't be completed.'); } }
Форма была бы
<form action="<?=base_url();?>controller/uploadImage/" method="post" enctype="multipart/form-data" id="uploadimg">
В представлении это вызовет функцию uploadImg в контроллере, и здесь сохранение изображения и вставка в базу данных завершены.
public function uploadImage(){ //$id = $this->session->userdata('uid'); $config[ 'upload_path' ] = UPLOAD_DIR.'/newsletter/0'; $config[ 'allowed_types' ] = 'gif|jpg|png'; $config[ 'max_size' ] = '1500'; $config[ 'max_width' ] = '1000'; $config[ 'max_height' ] = '1500'; $image_name = "files"; $this->load->library( 'upload', $config ); if ( $this->upload->do_upload( $image_name ) ) { $upload_data = $this->upload->data(); if(!empty($upload_data)){ $arg = array( 'name' => $upload_data[ 'file_name' ] ); $this->modelName->insert($arg ); $data['msg']="success"; } else{ $data['errmsg']="Couldnot upload the file!"; } } else{ $data['errmsg'] =$this->upload->display_errors(); } echo json_encode($data); }
Теперь это вызовет функцию processJson в скрипте. И загрузка показывает результат.
Вы можете найти файл javascript на jquery.form.js .
Надеюсь, это сработает для вас.