SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with some Javascript please for newby on upload script

    Hi All,

    Not sure if anyone can help, I know php but just started learning javascript, very basic, I am using a script for my site for uploading photos, JQuery File Upload Plugin Script - Uploadify I have it working fine but there is just one option I want to do and that is write to a text document the name of the picture, I know javascript cant itself write to a file but I was wondering if you can insert php in a javascript bit of code.

    The documentation for uploadify says that its a funtion for the option here is the link to the documentation onComplete - Uploadify

    and the exsample code they give is

    Code:
        $('#file_upload').uploadify({
          'uploader'    : '/uploadify/uploadify.swf',
          'script'      : '/uploadify/uploadify.php',
          'cancelImg'   : '/uploadify/cancel.png',
          'folder'      : '/uploads',
          'multi'       : true,
          'onComplete'  : function(event, ID, fileObj, response, data) {
              alert('There are ' + data.fileCount + ' files remaining in the queue.');
            }
        });
    I know the above exsample would put an allert box up but just wondered if there is a way to get the code to run some php

    I hope this makes sence

    Thanks in advance

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    There is actually no need for any extra code in the javascript, all you need to do is add the code to the uploadify.php file. See the example code below that i wrote quickly...

    PHP Code:
    <?php

    if (!empty($_FILES)) {
        
    $tempFile $_FILES['Filedata']['tmp_name'];
        
    $targetPath $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
        
    $targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
        
        
    $fp fopen('yourfile.txt''a+');
        
    fwrite($fp$targetFilestrlen($targetFile));
        
    fclose($fp);
        
        
    move_uploaded_file($tempFile,$targetFile);
        echo 
    str_replace($_SERVER['DOCUMENT_ROOT'],'',$targetFile);
    }

    ?>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi mate your a star, should have looked at doing that first thank you so much

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry just one more question on the same script i am trying to pass some form data back to the backend uploadify.php script using a scriptdata but not working just wondered if anyone can help

    the code i have on the upload page is

    Code:
    <script type="text/javascript" src="Upload/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="Upload/swfobject.js"></script>
    <script type="text/javascript" src="Upload/jquery.uploadify.v2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('#file_upload').uploadify({
        'uploader'  : 'Upload/uploadify.swf',
        'script'    : 'Upload/uploadify.php',
        'cancelImg' : 'Upload/cancel.png',
        'folder'    : 'NewGallery/photos',
        'auto'      : false,
    	'multi'       : true,
    	'queueID'        : 'Que',
    	'method'      : 'POST',
    	'scriptData' : {'NameGuest': '<?php echo $_POST["NameGuest"]; ?>'}
      });
    });
    </script>
    and on the uploadify.php page i use $somevar=$_POST["NameGuest"];

    but its not pulling the data from the form.

    any help would be great

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Does the index NameGuest exist on the page your trying to embed it for use on? I ask because your using a $_POST request to get the index value which confuses me.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now I think I might have confused myself as I have been reading various posts and thought that the post would get the data from a form that I could use in php on uploadify.php



    Sent from my iPhone using Tapatalk

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My Full code is

    Main Page with upload form

    Code:
    <script type="text/javascript" src="Upload/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="Upload/swfobject.js"></script>
    <script type="text/javascript" src="Upload/jquery.uploadify.v2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('#file_upload').uploadify({
        'uploader'  : 'Upload/uploadify.swf',
        'script'    : 'Upload/uploadify.php',
        'cancelImg' : 'Upload/cancel.png',
        'folder'    : 'NewGallery/photos',
        'auto'      : false,
    	'multi'       : true,
    	'queueID'        : 'Que',
    	'method'      : 'POST',
    	'scriptData' : {'NameGuest': '<?php echo $_POST["NameGuest"]; ?>'}
      });
    });
    </script>
    
    <form id="form1" name="form1" method="post" action="">
    
    <input name="NameGuest" type="text" id="NameGuest" size="50" />
    
    <input id="file_upload" name="file_upload" type="file" />
    
    <a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>
    </form>
    And the uploadify.php files is

    Code:
    <?php
    if (!empty($_FILES)) {
    	$tempFile = $_FILES['Filedata']['tmp_name'];
    	$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
    	$targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
    
    
    	$fileParts  = pathinfo($_FILES['Filedata']['name']);
    	$fileExt = '.'.$fileParts['extension'];
    	
    	$tfn = 0;
    	while(is_file($targetFile)) {
    		$targetFile = str_ireplace($fileExt, '', $targetFile);
    		$targetFile = str_ireplace('['.$tfn.']', '', $targetFile);
    		$tfn++;
    		$targetFile = $targetFile.'['.$tfn.']'.$fileExt;
    	}
    		$fp = fopen('captions.txt', 'a+');
    		$guestname=$_POST["NameGuest"];
    		$createdfile = substr_replace($targetFile, "", 0, 64)."|Photo By ".$guestname."\n";
    		fwrite($fp,$createdfile,strlen($createdfile));
    		fclose($fp);
    		
    		move_uploaded_file($tempFile,$targetFile);
    		
    		echo "1";
    
    }
    
    	
    ?>
    any help would be great

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sorry i confused you, the part I'm talking about is the following

    Code:
    'scriptData' : {'NameGuest': '<?php echo $_POST["NameGuest"]; ?>'}
    Here you have a $_POST request but you didn't state where the index NameGuest comes from as there is nothing in your code to suggest to me that the upload form was accessed via another form.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I might have it all wrong myself, I thought that the data would be taken from the standard form In the code


    Sent from my iPhone using Tapatalk

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <form id="form1" name="form1" method="post" action="">

    <input name="NameGuest" type="text" id="NameGuest" size="50" />


    Sent from my iPhone using Tapatalk

  12. #12
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sorry i was completely missing the form element in the code, guess I'm going blind at just 20. What you can do to set the name is the following, first create an event handler for the name input like the below example...

    Code JavaScript:
    $('[name="NameGuest"]').keyup(function() {
        if (!$(this).val().length) {
            alert('Please enter your name!');
        } else {
            uploadifySD.NameGuest = $(this).val();
            $('#file_upload').uploadifySettings('scriptData', uploadifySD);
        }
    });

    Essentially with the following event we can dynamically update the uploadify scriptData values in real time, the next thing we need to do is update the form and code a little as in my head we only want the form to upload the file(s) if a name is entered. See the example code below on how to achieve this...

    HTML Code:
    <form id="form1" name="form1" method="post" action="">
        <input name="NameGuest" type="text" id="NameGuest" size="50" />
        <input id="file_upload" name="file_upload" type="file" />
        <a href="#upload-files">Upload Files</a>
    </form>
    Code JavaScript:
    $('a[href*="upload-files"]').click(function(e) {
        e.preventDefault();
     
        if ($('[name="NameGuest"]').val().length) {
            $('#file_upload').uploadifyUpload();
        } else {
            alert('Please enter your name!');
        }
    });

    The final thing we need to do is update the uploadify code you already have so it uses a global var to dynamically set the NameGuest value.

    Code JavaScript:
    var uploadifySD = {NameGuest: ''};
     
    $('#file_upload').uploadify({
        'uploader'   : 'Upload/uploadify.swf',
        'script'     : 'Upload/uploadify.php',
        'cancelImg'  : 'Upload/cancel.png',
        'folder'     : 'NewGallery/photos',
        'auto'       : false,
        'multi'      : true,
        'queueID'    : 'Que',
        'method'     : 'POST',
        'scriptData' : uploadifySD
    });

    Essentially by the end your javascript should look something like
    Code JavaScript:
    $(function() {
        var uploadifySD = {NameGuest: ''};
     
        $('#file_upload').uploadify({
            'uploader'   : 'Upload/uploadify.swf',
            'script'     : 'Upload/uploadify.php',
            'cancelImg'  : 'Upload/cancel.png',
            'folder'     : 'NewGallery/photos',
            'auto'       : false,
            'multi'      : true,
            'queueID'    : 'Que',
            'method'     : 'POST',
            'scriptData' : uploadifySD
        });
     
        $('[name="NameGuest"]').keyup(function() {
            if (!$(this).val().length) {
                alert('Please enter your name!');
            } else {
                uploadifySD.NameGuest = $(this).val();
                $('#file_upload').uploadifySettings('scriptData', uploadifySD);
            }
        });
     
        $('a[href*="upload-files"]').click(function(e) {
            e.preventDefault();
     
            if ($('[name="NameGuest"]').val().length) {
                $('#file_upload').uploadifyUpload();
            } else {
                alert('Please enter your name!');
            }
        });
    });

  13. #13
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all this will give it a go when I get to my pc, I really appreciate all your help, I guess I am going to start to learn JavaScript, I have the books I better start reading



    Sent from my iPhone using Tapatalk

  14. #14
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem, the main reason i know so much about Uploadify is because i myself have used it but on a much more advanced level

  15. #15
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldnt have told me that, you can bet I have a 100 more questions coming


    Sent from my iPhone using Tapatalk

  16. #16
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have just used the code and it works perfect THANK YOU THANK YOU

  17. #17
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your welcome


Bookmarks

Posting Permissions

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