AJAX Image upload to Server Issue??

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ziycon
    Contributor
    • Sep 2008
    • 384
    #1

    AJAX Image upload to Server Issue??

    Ok, I've gone through the code at http://www.webtoolkit.info/ajax-file-upload.html and I'm totally lost, haven't got a clue what it does and wher eit should be added!?!

    So i have:
    Code:
    <html>
<head>
<script type="text/javascript" language="javascript">
	var loading_img = '/media/images/layout/loading.gif';
	var loading_msg = ' Loading...';
	var xmlhttp_obj = false;//create the XMLHttpRequest
	
	function ewd_xmlhttp()
	{
		if (window.XMLHttpRequest)
		{ // if Mozilla, Safari etc
			xmlhttp_obj = new XMLHttpRequest();
		}
		else if (window.ActiveXObject)
		{ // if IE
			try
			{
				xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e)
			{
				try
				{
					xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e)
				{

				}
			}
		}
		else
		{
			xmlhttp_obj = false;
		}

		return xmlhttp_obj;
	}   //get content via GET

	function getcontent(url, containerid)
	{
		var xmlhttp_obj = ewd_xmlhttp();
		document.getElementById(containerid).innerHTML = '<img src="' + loading_img + '" />' + loading_msg;
		xmlhttp_obj.onreadystatechange=function()
		{
			loadpage(xmlhttp_obj, containerid);
		}
		xmlhttp_obj.open('GET', url, true);
		xmlhttp_obj.send(null);
	}     

	function loadpage(xmlhttp_obj, containerid)
	{
		if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status == 200 )
		{
			document.getElementById(containerid).innerHTML = xmlhttp_obj.responseText;
		}
	}
//]]>
</script>
<script type="text/javascript" src="sys/js/webtoolkit.aim.js"></script>
	<script type="text/javascript">
		function startCallback() {
			// make something useful before submit (onStart)
			return true;
		}
 
		function completeCallback(response) {
			// make something useful after (onComplete)
			document.getElementById('nr').innerHTML = parseInt(document.getElementById('nr').innerHTML) + 1;
			document.getElementById('r').innerHTML = response;
		}
</script>

</head>
<body>
<div id="teamdb_container">
                <form method="post" onsubmit="return AIM.submit(this, {\'onStart\' : startCallback, \'onComplete\' : completeCallback})">
                <div id="teamdb_title">/New Team</div>
                <div class="teamdb_line_wrapper">
                    <div class="teamdb_line_name">Group Name:</div>
                    <div class="teamdb_line_text"><input type="text" id="name" name="name" size="40" maxlength="80" /></div>
                </div>
                <div class="teamdb_line_wrapper">
                    <div class="teamdb_line_name">Website:</div>
                    <div class="teamdb_line_text"><input type="text" id="url" name="url" size="40" maxlength="80" /></div>
                </div>
                <div class="teamdb_line_wrapper">
                    <div class="teamdb_line_name">Banner:</div>
                    <div class="teamdb_line_text"><input type="file" id="banner" name="form[file]" size="50">
                    <input type="hidden" name="MAX_FILE_SIZE" value="1000000"></div>
                </div>
                <div class="teamdb_line_wrapper">
                    <div class="teamdb_line_name">About Us:</div>
                    <div class="teamdb_line_text"><textarea id="body" name="body" rows="10" cols="60"></textarea></div>
                </div>
                <div class="teamdb_line_wrapper">
                    <div class="teamdb_line_button"><input type="submit" value="Add New Team" onclick="getcontent(\'sys/ajaxCalls.php?acid=101&value=\'+document.getElementById(\'name\').value+\'-\'+document.getElementById(\'url\').value+\'-\'+document.getElementById(\'banner\').value+\'-\'+document.getElementById(\'body\').value,\'teamdb_container\')" /></div>
                </div>
                </form>
            </div>
</body>
</html>
    And then it goes here:
    Code:
    if($acid == 101) {
          $value = explode('-',$value);
          if(($value[0]!='') && ($value[1]!='') && ($value[2]!='') && ($value[3]!='')) {
              //Store to DB query here
               echo '<div id="teamdb_container">
                      <meta http-equiv="refresh" content="2;url=teamdb.html">
                      <div id="db_add_successful">Team has been added successfully!</div>
                      <div id="redirect_msgs">You will be redirected in 2 seconds...</div>
                    </div>';
          }
          else {
              echo '<div id="teamdb_container">
                <form method="post" onsubmit="return AIM.submit(this, {\'onStart\' : startCallback, \'onComplete\' : completeCallback})">
                <div id="teamdb_title">/New Team</div>
                <div class="teamdb_line_wrapper">
                    <div class="teamdb_line_name">Group Name:</div>
                    <div class="teamdb_line_text"><input type="text" id="name" name="name" value="'.$value[0].'" size="40" maxlength="80" /></div>
                </div>
                <div class="teamdb_line_wrapper">
                    <div class="teamdb_line_name">Website:</div>
                    <div class="teamdb_line_text"><input type="text" id="url" name="url" value="'.$value[1].'" size="40" maxlength="80" /></div>
                </div>
                <div class="teamdb_line_wrapper">
                    <div class="teamdb_line_name">Banner:</div>
                    <div class="teamdb_line_text"><input type="file" id="banner" name="form[file]" size="50">
                    <input type="hidden" name="MAX_FILE_SIZE" value="1000000"></div>
                </div>
                <div class="teamdb_line_wrapper">
                    <div class="teamdb_line_name">About Us:</div>
                    <div class="teamdb_line_text"><textarea id="body" name="body" rows="10" cols="60">'.$value[3].'</textarea></div>
                </div>
                <div class="teamdb_line_wrapper">
                    <div class="teamdb_line_button"><input type="submit" value="Add New Team" onclick="getcontent(\'sys/ajaxCalls.php?acid=101&value=\'+document.getElementById(\'name\').value+\'-\'+document.getElementById(\'url\').value+\'-\'+document.getElementById(\'banner\').value+\'-\'+document.getElementById(\'body\').value,\'teamdb_container\')" /></div>
                </div>
                </form>
            </div>';
          }
      }
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Although it says Ajax, it doesn't use the XMLHttpRequest object because you can't do a file upload using Ajax. It uses a hidden iframe. You can take the code from the demo and modify it to your requirements.

        Comment

        • ziycon
          Contributor
          • Sep 2008
          • 384
          #3
          Will the code in the link work with my AJAX or is there a way using AJAX to upload an image?

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              It could work, but if you're going to use a hidden iframe anyway, there's no need for the Ajax code.

                Comment

                • ziycon
                  Contributor
                  • Sep 2008
                  • 384
                  #5
                  Ok, then forget about the iFrame bit, i have the above code working and in place using AJAX, I want to expand on the existing AJAX form to allow the upload of an image aswell, any tips or ideas on how to use the XMLHttpRequest to do this or is it possible?

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      No, it's not. You need to use an iframe, and since the (hidden) iframe will serve the purpose of submitting a form without reloading/unloading the page, there's no need for the Ajax code. Use the demo code and just add your form fields.

                        Comment

                        • ziycon
                          Contributor
                          • Sep 2008
                          • 384
                          #7
                          The sites already been setup to use AJAX and it would be a lot of work to change it to just an iFrame.

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              Granted, but the iframe is dynamically created in the code, so you don't have to do anything. You only have to not use Ajax on this page. Calling the AIM code onsubmit should do the work for you because the target of the form is set to the iframe.

                                Comment

                                • ziycon
                                  Contributor
                                  • Sep 2008
                                  • 384
                                  #9
                                  Ok, I'll give this a shot then, thanks.

                                    Comment

                                    • ziycon
                                      Contributor
                                      • Sep 2008
                                      • 384
                                      #10
                                      With the below code is it possible to use an AJAX form where basiclly when the 'image' field is changed that the images name value is assigned the hidden field 'imageName'. Now 'imageName' is passed through the AJAX form to be stored in the database and also when submit is pessed that the action of the form will only upload the file??
                                      Can an AJAX form do the AJAX and action work on one form when submit is clicked or will the onSubmit function override the action function?
                                      Code:
                                      <form method="post" action="uploaded.php" onSubmit="storeInfo()">
	<input type="text" id="name" size="25" />
	<input type="file" id="image" onchange="this.value" />
	<input type="hidden" id="imageName" />
	<input type="submit" value="Submit" />
</form>

                                        Comment

                                        • acoder
                                          Recognized Expert MVP
                                          • Nov 2006
                                          • 16032
                                          #11
                                          Although it would be possible (Ajax is asynchronous), there's no need because you can just deal with all inputs including inserting into a database in uploaded.php.

                                            Comment

                                            • ziycon
                                              Contributor
                                              • Sep 2008
                                              • 384
                                              #12
                                              Ok, thanks for that, I'm just trying to think the easiest way and least amout of work to implement the upload.

                                                Comment

                                                Previous template Next
                                                Working...