使用Bootsrap模态上传图像
使用bootsrap模式上传图像时遇到一些问题。 问题是，即使我选择了一个图像，我总是得到validation错误“你的上传表格是空的”。
这是我的formssript在视图上
javascript：
var save_method; //for save method string var table; $(document).ready(function() { //datatables table = $('#table').DataTable({ "processing": true, //Feature control the processing indicator. "serverSide": true, //Feature control DataTables' server-side processing mode. "order": [], //Initial no order. // Load data for the table's content from an Ajax source "ajax": { "url": "", "type": "POST" }, //Set column definition initialisation properties. "columnDefs": [ { "targets": [ -1 ], //last column "orderable": false, //set not orderable }, ], }); //set input/textarea/select event when change value, remove class error and remove text help block $("input").change(function(){ $(this).parent().parent().removeClass('has-error'); $(this).next().empty(); }); $("textarea").change(function(){ $(this).parent().parent().removeClass('has-error'); $(this).next().empty(); }); $("select").change(function(){ $(this).parent().parent().removeClass('has-error'); $(this).next().empty(); }); }); function add_berita(){ save_method = 'add'; $('#form')[0].reset(); // reset form on modals $('.form-group').removeClass('has-error'); // clear error class $('.help-block').empty(); // clear error string $('#modal_form').modal('show'); // show bootstrap modal $('.modal-title').text('Add Berita'); // Set Title to Bootstrap modal title } function edit_berita(id){ save_method = 'update'; $('#form')[0].reset(); // reset form on modals $('.form-group').removeClass('has-error'); // clear error class $('.help-block').empty(); // clear error string //Ajax Load data from ajax $.ajax({ url : "/" + id, type: "GET", dataType: "JSON", success: function(data) { $('[name="id_berita"]').val(data.id_berita); $('[name="judul_berita"]').val(data.judul_berita); $('[name="isi_berita"]').val(data.isi_berita); $('[name="id_user"]').val(data.id_user); $('[name="postdate"]').val(data.postdate); $('[name="waktu"]').val(data.waktu); $('#modal_form').modal('show'); // show bootstrap modal when complete loaded $('.modal-title').text('Edit Berita'); // 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(){ $('#btnSave').text('saving...'); //change button text $('#btnSave').attr('disabled',true); //set button disable var url; if(save_method == 'add') { url = ""; } else { url = ""; } // ajax adding data to database $.ajax({ url : url, type: "POST", data: $('#form').serialize(), dataType: "JSON", success: function(data) { if(data.status) //if success close modal and reload ajax table { $('#modal_form').modal('hide'); reload_table(); } else { for (var i = 0; i < data.inputerror.length; i++) { $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string } } $('#btnSave').text('save'); //change button text $('#btnSave').attr('disabled',false); //set button enable }, error: function (jqXHR, textStatus, errorThrown) { alert('Error adding / update data'); $('#btnSave').text('save'); //change button text $('#btnSave').attr('disabled',false); //set button enable } }); } function delete_berita(id){ if(confirm('Are you sure delete this data?')) { // ajax delete data to database $.ajax({ url : "/"+id, type: "POST", dataType: "JSON", success: function(data) { //if success reload ajax table $('#modal_form').modal('hide'); reload_table(); }, error: function (jqXHR, textStatus, errorThrown) { alert('Error deleting data'); } }); } }
控制器
public function ajax_add() { $this->_validate(); $nmfile = "file_".time(); //nama file saya beri nama langsung dan diikuti fungsi time $config['upload_path'] = './assets/images/'; //path folder $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan $config['max_size'] = '2048'; //maksimum besar file 2M $config['max_width'] = '1288'; //lebar maksimum 1288 px $config['max_height'] = '768'; //tinggi maksimu 768 px $config['file_name'] = $nmfile; //nama yang terupload nantinya $this->load->library('upload',$config); if($_FILES['foto_berita']['name']){ if ($this->upload->do_upload('foto_berita')){ $berita = $this->upload->data(); $data = array( 'judul_berita' =>$this->input->post('judul_berita'), 'isi_berita' =>$this->input->post('isi_berita'), 'foto_berita' =>$berita['file_name'], 'id_user' =>$this->input->post('id_user'), 'postdate' =>$this->input->post('postdate'), 'waktu' =>$this->input->post('waktu'), ); $insert = $this->m_databerita->save($data); echo json_encode(array("status" => TRUE)); } } }
谢谢您的帮助。
这是一个关于如何在我的模态窗口中使用iFrame上传图片的示例，通过这样做我避免重新加载页面。 我不知道你是否可以用ajax来做，但这是一种不同的方法。
首先在模态体内添加iFrame，注意src是包含iframe信息的视图：
这是iframe的src视图，如果你为了不同的目的使用多个iframe并且它们共享页眉和页脚，那么header.php和footer.php是：
现在在您的控制器中，这只是一个示例函数，您可以在iFrame中添加所有其他字段，如果您需要在上传图片时提交它们，然后执行您需要执行的操作。 我只是返回true或false，看看上传是否成功。
public function item_image_upload() { $data['file_name'] = false; $data['error'] = false; $config['allowed_types'] = 'gif|jpg|png'; $config['upload_path'] = $this->img_full; $config['encrypt_name'] = true; $config['remove_spaces'] = true; $this->load->library('upload', $config); if ( $this->upload->do_upload()) { $upload_data = $this->upload->data(); return true; } return false; }