upload pic and insert different values in database using jquey...

6 replies
Hello

I wanna update my database and upload picture in my folder after rename the pic but the problem is when i tried to send simple value get from text fields,radio button and check box its working fine but when i wanna upload pic using this it not working

code is here

<input type="text" name="film_title" size="45" id="film_title"/>
<input type="text" name="film_release_date" id="film_release_date" />
<input type="radio" name="film_industry_language" value="Urdu" id="Urdu" class="film_industry_language" /><label for="Urdu">Urdu</label>
<input type="checkbox" name="film_genre[]" value="Action" id="Action" class="film_genre" /><label for="Action">Action</label>
<input type="checkbox" name="film_genre[]" value="Adventure" id="Adventure" class="film_genre"/><label for="Adventure">Adventure</label>
<input type="file" size="50" name="film_image" id="film_image"/>

<input type="submit" value="submit whole film info" name="submit" id="save_button" class="submitm"/><span id="save_status"></span>


<script language="javaScript" type="text/javascript" src="js/jquery.js"></script>
<script language="javaScript" type="text/javascript">
$('#save_button').click(function(){
var film_title = $('#film_title').val();
var film_release_date = $('#film_release_date').val();
var film_industry_language = $('.film_industry_language').val();
var film_image = $('#film_image').val();
var film_genre="";
film_genre += $('#Action').val() + "\n";
film_genre += $('#Adventure').val() + "\n";
film_genre += $('#Animation').val() + "\n";
film_genre += $('#Biography').val() + "\n";

$('#save_status').text('Loading...');

$.post('ajax/add-new-film-form-ajax.php',{ film_title: film_title , film_release_date:film_release_date , film_industry_language:film_industry_language, film_genre:film_genre, film_image:film_image }, function(data){
$('#save_status').text(data);


});
});
</script>


i don't wanna us <form> because when i use this <form> refresh my page can anyone help me to get image_name, image_tmp name..

Thanks
#database #insert #jquey #pic #upload #values
  • Profile picture of the author wayfarer
    You can't upload a picture using AJAX, it's not allowed. You have to use a form that submits through a hidden IFRAME.

    Code:
    <form action="ajax/add-new-film-form-ajax.php" method="post" enctype="multipart/form-data" target="hiddenframe">
    ...
    </form>
    <iframe name="hiddenframe" style="height: 1px; width: 1px; border: none; visibility: hidden;"></frame>
    That's the basic idea. Notice that the target attribute of the FORM matches the name of the IFRAME. It's a little tricky reading the response though. It's best to use the iframe's onload() or $(iframe).load() event to determine when it has finished loading, then read its response with JavaScript. I think there's some plugins that will handle this already though. Google "AJAX upload" to find some.
    Signature
    I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
    {{ DiscussionBoard.errors[6844588].message }}
    • Profile picture of the author lovefax89
      Originally Posted by wayfarer View Post

      You can't upload a picture using AJAX, it's not allowed. You have to use a form that submits through a hidden IFRAME.

      Code:
      <form action="ajax/add-new-film-form-ajax.php" method="post" enctype="multipart/form-data" target="hiddenframe">
      ...
      </form>
      <iframe name="hiddenframe" style="height: 1px; width: 1px; border: none; visibility: hidden;"></frame>
      That's the basic idea. Notice that the target attribute of the FORM matches the name of the IFRAME. It's a little tricky reading the response though. It's best to use the iframe's onload() or $(iframe).load() event to determine when it has finished loading, then read its response with JavaScript. I think there's some plugins that will handle this already though. Google "AJAX upload" to find some.
      thanks for helping me..now its working fine but now i have one more small problem

      I wanna redirect my use to his/her post she/he just make but when i use iframe he show my threat down my form page...
      help me in this how can i redirect use to require page on same tab

      Regards
      {{ DiscussionBoard.errors[6848897].message }}
  • Profile picture of the author FirstSocialApps
    In your upload code you can run a JS on the top (the main page that has the IFRAME) when the upload is done. Let me know if you need a code snipit.
    {{ DiscussionBoard.errors[6846054].message }}
  • Profile picture of the author wayfarer
    I'm not quite sure what you mean. Could you rephrase?
    Signature
    I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
    {{ DiscussionBoard.errors[6849214].message }}
  • Profile picture of the author lovefax89
    in php we use this for redirection
    Header("Location: abc.php");

    but when i use this in my ajax/add-new-film-form-ajax.php to redirect my page my page redirecting but it only showing the container of iframe and my form is also showing
    I wanna show only my new page created by form using this form on same tab
    {{ DiscussionBoard.errors[6849649].message }}
  • Profile picture of the author wayfarer
    First of all, when you send a header, that only happens before the rest of your output is sent, so you can't redirect that way. You'll need to do something on the client-side, with JavaScript, etc, but without knowing more about your system it's hard for me to give advice about it.
    Signature
    I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
    {{ DiscussionBoard.errors[6850551].message }}

Trending Topics