Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image upload script for multiple upload

    Hello,

    I am not a JS developer so I hope someone here can help me.

    I got this code from the net:
    Code:
     <script type="text/javascript" src="http://ajax.googleapis.com/
    ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function() 
    {$('#photoimg').live('change', function(){ 
    $("#preview").html('');
    $("#preview").html('<img src="images/loader.gif" alt="Uploading...."/>');
    $("#imageform").ajaxForm(
    {target: '#preview'
    }).submit();
    });
    }); 
    </script>
    This works perfectly for 1 image form but I want to have 4 forms (different images) on the same page and I want to get the same effect (page is not refreshing and images are uploaded to server).
    On jquery.form.js there is something that may help, but I dont know how to code it correctly:
    Code:
    	Usage Note:
    	-----------
    	Do not use both ajaxSubmit and ajaxForm on the same form.  These
    	functions are intended to be exclusive.  Use ajaxSubmit if you want
    	to bind your own submit handler to the form.  For example,
    
    	$(document).ready(function() {
    		$('#myForm').bind('submit', function(e) {
    			e.preventDefault(); // <-- important
    			$(this).ajaxSubmit({
    				target: '#output'
    			});
    		});
    	});
    
    	Use ajaxForm when you want the plugin to manage all the event binding
    	for you.  For example,
    
    	$(document).ready(function() {
    		$('#myForm').ajaxForm({
    			target: '#output'
    		});
    	});
    
    	When using ajaxForm, the ajaxSubmit function will be invoked for you
    	at the appropriate time.
    */
    
    /**
     * ajaxSubmit() provides a mechanism for immediately submitting
     * an HTML form using AJAX.
     */
    The HTML for the form:
    Code:
    <form id="imageform" method="post" enctype="multipart/form-data" action="ajaximage_update.php">
    <input type="hidden" name="img" value="image_1" />
    <input type="hidden" name="row_id" value="<?=$rsi?>" />
    
    <div class="file-input-wrapper">
      <button class="btn-file-input"><?=$button_text?></button>
      <input type="file"  name="photoimg" id="photoimg"  />
    </div>
    
    </form>
    <div id="preview"></div>
    What should I do in this case?
    I want to have 4 different forms on the page and each image would work using the JS.

  • #2
    New Coder
    Join Date
    Aug 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK got it...all working now.
    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •