Uploading File using PHP + jQuery

How do I upload a file using jQuery then "insert" it into the

Page 1 of 1

4 Replies - 8422 Views - Last Post: 22 September 2010 - 06:09 AM

#1 Bbob  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 09-September 10

Uploading File using PHP + jQuery

Posted 19 September 2010 - 05:03 AM

Hi

How do I upload a file into using jQuery / AJAX

As I understand...


When passing an image/value to PHP

<form action="page.php" method="post" enctype="multipart/formdata">
  <input type="text" name="box"/><input type="submit"/>
</form>
 


if using jQuery

<form name="part">
   <input type="text" name="box"/><input type="button" onclick="pass();"/>
</form>

 
 
function pass()
{
   $.post('page.php', {info:part.box.value})
}

 

How do I incorporate enctype=multipart/formdata in this js file?


=========


If its not possible, is there an alternative in pass data from a form plus uploading an image simultaneously?

Is This A Good Question/Topic? 0
  • +

Replies To: Uploading File using PHP + jQuery

#2 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 5672
  • View blog
  • Posts: 22,524
  • Joined: 23-August 08

Re: Uploading File using PHP + jQuery

Posted 19 September 2010 - 05:16 AM

Not a PHP question, so I'll move this to jQuery for you.

EDIT: On a side note, have you considered a plugin like this one?

This post has been edited by JackOfAllTrades: 19 September 2010 - 05:19 AM

Was This Post Helpful? 0
  • +
  • -

#3 Bbob  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 09-September 10

Re: Uploading File using PHP + jQuery

Posted 21 September 2010 - 05:04 AM

Hello and thanks for the reply.

Sorry it took a while for me to reply... :sweatdrop:


Ill try this then post back what happens :D
Was This Post Helpful? 0
  • +
  • -

#4 Bbob  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 09-September 10

Re: Uploading File using PHP + jQuery

Posted 22 September 2010 - 05:22 AM

Hello

I tried the given link, I stripped down most of its code since I really only need the function to upload the file, unfortunately its not working.

Nothing happens when I click the "Upload" button

Could you please look at my code.

My HTML
<html>

      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="ajaxfileupload.js"></script>
      
      <script type="text/javascript">
              function uploadFile()
              {
                  $("#loading").ajaxStart
                  (
                    function()
                    {
                      $(this).show();
                    }
                  )
                  .ajaxComplete
                  (
                     function()
                     {
                       $(this).hide();
                     }
                  );
                  
                  $.uploadFile
                  (
                   {
                     url:'uploadfile.php',
                     secureuri:false,
                     fileElementId:'fileform',
                     //dataType: 'json'
                   }
                  )
                  
                  function(error)
                  {
                    $('#error').html(error).show();

              }


      </script>


      <img src="loading.gif" id="loading" style="display:none;" />

      <body>

            <form name="page" method="POST" enctype="multipart/form-data">
        
                <input type="file" id="fileform"/>
                <input type="button" id = "upload" value = "Upload" onclick = "uploadFile();">
        
            </form>
            
            <div id="error">Display Error Here</div>

      </body>

</html>


My PHP
<?php
     $formname = 'fileform';
     
     $file = $_FILES['image']['tmp_name'];
     
     echo $file;
?>



This code, for now, only displays the name on the div "error".
Was This Post Helpful? 0
  • +
  • -

#5 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Uploading File using PHP + jQuery

Posted 22 September 2010 - 06:09 AM

Hi,

I don't know anything about that plug-in so can't help you with that. However I can suggest another plug-in that I have recently found and used to upload files using AJAX. jQuery Form Plugin - . After you include the path to the plugin you could use it like this :



$("form").submit(function(){
   
   $(this).ajaxSubmit({
      success:function(data){
         alert(data);
      }
   });

  //prevent normal submit
  return false;
});


You would have to set the action attribute of the form back to upload.php. You should be able to specify the target in the ajaxSubmit method(90% sure you can) but I haven't used it like that and don't want to give you incorrect info :) The documentation for the plug-in is excellent and it is very easy to use. Hope that helps.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1