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

by 6 replies
7
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
#programming #database #insert #jquey #pic #upload #values
  • 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.
    • [1] reply
    • 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
  • 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.
  • I'm not quite sure what you mean. Could you rephrase?
  • 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
  • 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.
Join the discussion

Next Topics on Trending Feed