一千萬個為什麽

搜索

通過AJAX提交帶有文件輸入的表單

我找到了一種方法來提交包含文件輸入和其他一些文本輸入的表單。

view This is a simple view with a text box, file box and hidden boxes

<form method="post" name="adminForm" id="profile-form" enctype="multipart/form-data" >
  <input type='text' value='hello1'>
  <input type='file' name='profileimage'>
  <input type='button' id='btnimageadd' value='Upload'/>
  ...
  ....
  <input type='hidden' name='task' value='' />
  <input type='hidden' name='option' value='com_mycomponent' />
  <?php echo JHtml::_('form.token'); ?>
</form>

controller Controller method to catch the ajax request and pass to model for processing

public function profilePictureUpload(){
  JRequest::checkToken() or die( 'Invalid Token' );
  $model = $this->getModel();
  $response = $model->uploadPicture();
  JFactory::getDocument()->setMimeEncoding( 'application/json' );
  echo $response ;
  JFactory::getApplication()->close();

  return;
}

model Actual model to do the processing. For debugging purposes I just put a print_r for the formdata to check whether all data on the form reaching the server.

public function uploadPicture() {
   $input = JFactory::getApplication ()->input;
   $formdata = $input->get ( 'jform', '', 'array' );
   print_r($formdata);
   return;
}

Ajax This will get trigger when the button is clicked. This is to submit the form to the server to do the image upload.

jQuery('#btnimageadd').on('click', (function(e){
  jQuery('#task').val('profile.profilepictureupload');
  var dataString = jQuery("#profile-form").serialize();

  jQuery.ajax({
    url: "index.php",
    type: "POST",
    data:  dataString,
    cache: false,
    processData:false,
    success: function(result){
      console.log(result);
    },
    error: function(result){
      console.log(result);
    }
  });
});

問題</強>

當我在上述方法中通過AJAX提交表單時,僅將文本和隱藏元素提交給表單而不是選定的圖像文件。

谷歌搜索時,我找到了另一個線程,解釋了提交所有輸入類型的表單的方法。但是我無法讓它在Joomla中運行。

https://stackoverflow.com/questions/10899384/上傳-兩個數據 - 和 - 文件功能於一身的外形使用,AJAX

有人可以幫我這個。

最佳答案

我設法讓它發揮作用。分享同樣可以幫助他人的東西。

表單和控制器沒有變化。模型和ajax略有變化

模型</強>

public function uploadPicture() {
  $input = JFactory::getApplication ()->input;
  $formdata = $input->get ( 'jform', '', 'array' );
  $filedata = $input->files->get ( 'jform' );
  print_r($filedata);
  print_r($formdata);
  return;
}

的Ajax </強>

jQuery('#btnimageadd').on('click', (function(e){
    jQuery('#task').val('profile.profilepictureupload');
    Joomla.submitform('', document.getElementById('profile-form'));
});

jQuery('form#profile-form').submit(function(){

  jQuery('#ajax_loader_image_4').show();

  var formData = new FormData(jQuery(this)[0]);
  jQuery.ajax({
    url: "index.php",
    type: "POST",
    data:  formData,
    async: false,
    cache: false,
    contentType:false,
    processData:false,
    success: function(result){
        console.log(result);
    },
    error: function(result){
        console.log(result);
    }
  });

  return false;
});

基本上按鈕單擊將提交表單,AJAX將在頁面提交時觸發。返回false將不會執行頁面刷新。

轉載註明原文: 通過AJAX提交帶有文件輸入的表單