javascript - 使用 Javascript 上传 Codeigniter 图片

Question

问题:在此处保存产品信息页面时，我想使用 Codeigniter 和 Javascript 上传图像。其他文本框和选择框数据保存功能工作正常。尝试了以下代码但显示错误:You did not select a file to upload.

请帮我解决这个错误并上传图片文件。

代码:

查看:addProduct.php

    <div class="tz-2 tz-2-admin">
    <div class="tz-2-com tz-2-main">
        <h4>Add New Product</h4>
    <div class="split-row">
    <div class="col-md-12">
    <div class="box-inn-sp ad-inn-page">
    <div class="tab-inn ad-tab-inn">
    <div class="hom-cre-acc-left hom-cre-acc-right">
    <div class="">

    <form class="">
    <span id="statusBar"></span>
    <div class="row">
        <div class="input-field col s12">
            <input id="prod_id" type="text" class="validate" disabled>
            <label id="lblProdId" for="prod_id">Product ID</label>
        </div>
    </div>

    <div class="row">
    <div class="input-field col s12">
        <input id="prod_name" type="text" class="validate">
        <label for="prod_name">Product Name</label>
    </div>
    </div>

    <div class="row">
    <div class="input-field col s12">
    <input id="prod_short_name" type="text" class="validate">
    <label for="prod_short_name">Short Name</label>
    </div>
    </div>
    <div class="row">
    <div class="input-field col s12">
        <select id="prod_cat" class="validate">
            <option value="">-- Select Category --</option>
            <?php foreach($categories as $Category):?>
            <option value="<?php echo $Category->Cat_ID;?>"><?php echo $Category->Cat_Name;?></option>
            <?php endforeach;?>
        </select>
    </div>
    </div>
    <div class="row">
    <div class="input-field col s12" >
        <select id="prod_brand" class="validate">
            <option value="">-- Select Brand--</option>
            <?php foreach($brands as $brand):?>
            <option value="<?php echo $brand->Brand_ID;?>"><?php echo $brand->Brand_Name;?></option>
            <?php endforeach;?>
        </select>
    </div>
    </div>
    <div class="row">
    <div class="input-field col s12">
        <input id="prod_mrp" type="text" class="validate">
        <label for="prod_mrp">MRP</label>
    </div>
    </div>
    <div class="row">
    <div class="input-field col s12">
        <input id="prod_p_price" type="text" class="validate">
        <label for="prod_p_price">Purchase Price</label>
    </div>
    </div>
    <div class="row">
    <div class="input-field col s12">
        <input id="prod_s_price" type="text" class="validate">
        <label for="prod_s_price">Min. Selling Price</label>
    </div>
    </div>
    <div class="row">
    <div class="input-field col s12">
        <select id="prod_uom" class="validate">
            <option>-- Seletct Unit of Measure --</option>
            <option value="Kilos">Kilos</option>
            <option value="Liters">Liters</option>
            <option value="Meters">Meters</option>
        </select>
    </div>
    </div>
    <div class="row">
    <div class="input-field col s12">
        <input id="prod_size" type="text" class="validate">
        <label for="prod_size">Size</label>
    </div>
    </div>
    <div class="row">
    <div class="input-field col s12">
        <input id="prod_per_unit" type="text" class="validate">
        <label for="prod_per_unit">Products per unit</label>
    </div>
    </div>

    <div class="row">
    <div class="input-field col s12">
        <input id="prod_SGST" type="text" class="validate">
        <label for="prod_SGST">SGST</label>
    </div>
    </div>
    <div class="row">
    <div class="input-field col s12">
        <input id="prod_CGST" type="text" class="validate">
        <label for="prod_CGST">CGST</label>
    </div>
    </div>
    <div class="row">
    <div class="input-field col s12">
        <input id="prod_IGST" type="text" class="validate">
        <label for="prod_IGST">IGST</label>
    </div>
    </div>

    <div class="row">
    <div class="input-field col s12">
        <select id="prod_GST_inc" class="validate">
            <option value=""selected>Is Inclusive GST</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </div>
    </div>
    <div class="row">
    <div class="input-field col s12">
        <select id="prod_status" class="validate">
            <option>-- Select Status </option>
            <option value="Enabled">Enabled</option>
            <option value="Enabled">Disabled</option>
        </select>
    </div>
    </div>
    <div class="row">
    <div class="input-field col s12">
        <textarea id="prod_description" class="materialize-textarea validate"></textarea>
        <label for="prod_description">Descriptions</label>
    </div>
    </div>
    <div class="row tz-file-upload">
    <div class="file-field input-field">
    <div class="tz-up-btn"> <span>File</span>
        <input type="file" id="prod_image" > </div>
        <div class="file-path-wrapper db-v2-pg-inp">
            <input class="file-path validate" id="prod_image" type="text">
            <label for="prod_image" style="padding-left:12%;" >Product Image</label>
        </div>
    </div>
    </div>
    <div class="row">
        <div class="input-field col s12" id="btnSaveProd"> <a class="waves-effect waves-light btn-large full-btn" href="#!" onclick="ajax_addProduct();">Save Product</a> </div>
    </div>
    </form>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>


    <script>

    function ajax_addProduct(){

    event.preventDefault();

    var hr = new XMLHttpRequest();
    // Create some variables we need to send to our PHP file
    var url = "<?php echo base_url();?>products/save";
    var prod_name = document.getElementById("prod_name").value;
    var prod_short_name = document.getElementById("prod_short_name").value;
    var prod_cat = document.getElementById("prod_cat").value;
    var prod_brand = document.getElementById("prod_brand").value;
    var prod_mrp = document.getElementById("prod_mrp").value;
    var prod_p_price = document.getElementById("prod_p_price").value;
    var prod_s_price = document.getElementById("prod_s_price").value;
    var prod_uom = document.getElementById("prod_uom").value;
    var prod_size = document.getElementById("prod_size").value;
    var prod_per_unit = document.getElementById("prod_per_unit").value;
    var prod_SGST = document.getElementById("prod_SGST").value;
    var prod_CGST = document.getElementById("prod_CGST").value;
    var prod_IGST = document.getElementById("prod_IGST").value;
    var prod_GST_inc = document.getElementById("prod_GST_inc").value;
    var prod_status = document.getElementById("prod_status").value;
    var prod_description = document.getElementById("prod_description").value;
    var prod_image = document.getElementById("prod_image").files[0].name;

    var vars = "prod_name="+prod_name+"&prod_short_name="+prod_short_name+"&prod_cat="+prod_cat+"&prod_brand="+prod_brand+"&prod_mrp="+prod_mrp+"&prod_p_price="+prod_p_price+"&prod_s_price="+prod_s_price+"&prod_uom="+prod_uom+"&prod_size="+prod_size+"&prod_per_unit="+prod_per_unit+"&prod_SGST="+prod_SGST+"&prod_CGST="+prod_CGST+"&prod_IGST="+prod_IGST+"&prod_GST_inc="+prod_GST_inc+"&prod_status="+prod_status+"&prod_description="+prod_description+"&prod_image="+prod_image;
        hr.open("POST", url, true);
    // Set content type header information for sending url encoded variables in the request
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Access the onreadystatechange event for the XMLHttpRequest object
        hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var return_data = hr.responseText;

    if (return_data > 0) {
        document.getElementById("statusBar").className = "";
        document.getElementById("statusBar").innerHTML = "<p class='alert alert-success' style='font-size:16px; padding-top:2%; text-align:center;'>  <strong>Success...!</strong> New category added.</p>";

    //var elem = document.getElementById("btnSaveProd");
    //elem.parentNode.removeChild(elem);

        var elem = document.getElementById("lblProdId");
        elem.parentNode.removeChild(elem);

        document.getElementById("prod_id").value = return_data;
    }
    else{
        document.getElementById("statusBar").className = "";
        document.getElementById("statusBar").innerHTML = return_data;
    }

    }
    else {
        document.getElementById("statusBar").innerHTML = return_data;
    }
    }

    if (prod_name != "" && prod_short_name != "") {
        hr.send(vars);
        document.getElementById("statusBar").className = "alert alert-info";
        document.getElementById("statusBar").innerHTML = "processing...";
    }
    else if(prod_name == ""){
        document.getElementById("prod_name").className = "validate invalid";
        var elmnt = document.getElementById("statusBar");
        elmnt.scrollIntoView();
    }
    else if(prod_short_name == ""){
        document.getElementById("prod_short_name").className = "validate invalid";
        var elmnt = document.getElementById("prod_name");
        elmnt.scrollIntoView();
    }

    }
    </script>

Controller :Products.php

public function save()
  {

    $data['Prod_Name'] = $this->input->post('prod_name', TRUE);
    $data['Prod_Short_Name'] = $this->input->post('prod_short_name', TRUE);
    $data['Cat_ID'] = $this->input->post('prod_cat', TRUE);
    $data['Brand_ID'] = $this->input->post('prod_brand', TRUE);
    $data['Prod_MRP'] = $this->input->post('prod_mrp', TRUE);
    $data['Prod_P_Price'] = $this->input->post('prod_p_price', TRUE);
    $data['Prod_S_Price'] = $this->input->post('prod_s_price', TRUE);
    $data['Prod_UOM'] = $this->input->post('prod_uom', TRUE);
    $data['Prod_Size'] = $this->input->post('prod_size', TRUE);
    $data['Prod_Per_Unit'] = $this->input->post('prod_per_unit', TRUE);
    $data['Prod_SGST'] = $this->input->post('prod_SGST', TRUE);
    $data['Prod_CGST'] = $this->input->post('prod_CGST', TRUE);
    $data['Prod_IGST'] = $this->input->post('prod_IGST', TRUE);
    $data['Prod_GST_Inclusive'] = $this->input->post('prod_GST_inc', TRUE);
    $data['Prod_Status'] = $this->input->post('prod_status', TRUE);
    $data['Prod_Description'] = $this->input->post('prod_description', TRUE);
    $data['Prod_Image'] = $this->input->post('prod_image', TRUE);

    $this->do_upload();

    if ($pid = $this->Products_Model->saveProduct($data))
    {
      echo $pid;
    }
    else
    {
      echo "<p class='alert alert-warning' style='font-size:17px; padding-top:2%; text-align:center;'><strong>Ooops!</strong> Unable to add category.</p>";
    }

  }

  public function do_upload()
  {
      $config['upload_path']          = base_url(). "uploads/";
      $config['allowed_types']        = 'gif|jpg|png';
      $config['max_size']             = 100;
      $config['max_width']            = 1024;
      $config['max_height']           = 768;

      $this->load->library('upload', $config);

      if ( ! $this->upload->do_upload('Prod_Image'))
      {
              $error = array('error' => $this->upload->display_errors());

              echo "<p class='alert alert-warning' style='font-size:17px; padding-top:2%; text-align:center;'><strong>Ooops!</strong>".$error['error'].".</p>";
      }
      else
      {
              $data = array('upload_data' => $this->upload->data());

              echo "<p class='alert alert-warning' style='font-size:17px; padding-top:2%; text-align:center;'><strong>Ooops!</strong>".$data['upload_data'].".</p>";
      }
  }

请帮我上传并保存文件名到数据库。

注意:不想使用 Jquery。请建议使用传统 Javascript 的答案。

Answer 1

要提交带有图像和其他数据的表单，请使用以下代码

<?php echo form_open_multipart('', 'id="your_form_id"'); ?>
<?php echo form_close(); ?>

和脚本

$("#your_form_id").submit(function(e) {
e.preventDefault(); 
var form = $(this); 
$.ajax({
    type: "POST",
    url: "<?php echo base_url();?>products/save",
    data: new FormData(this),
    dataType: 'json',
    contentType: false,
    cache: false,
    processData:false, 
    beforeSend: function(){
       // your code here
    }, 
    success: function(json)
    {
       // your code here
    }
    });
});