www.webdeveloper.com
Page 1 of 7 123 ... LastLast
Results 1 to 15 of 101

Thread: Resize, preview and upload an image with AJAX - Complete example

  1. #1
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40

    Resize, preview and upload an image with AJAX - Complete example

    Hello,

    I wanted to do an Ajax script to resize and preview and image in an html form. Well, I didn't find how to do with Ajax, so I had to use php.

    The issue is that JavaScript cannot manage a file field to get the selected file and send it via Ajax. The only way to send a file is submitting a form. To not send all data of the form, the file field must be a separate form from the rest of the data. So it can be automatically sent to a php script, which resizes the image, uploads it and then can display it in a iframe without reloading the page.

    Then you have the resized image previewed in the form without submitting all data. And then you can send all data with Ajax, including the path of the previously uploaded image, which is stored as a variable in the iframe.

    I use one html file and two php scripts, which in total are less than 20 KB.

    What do you think about this approach?

    Kind regards

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <!--
    Author: Alberto Moyano Sánchez
    Date: 2009-05-24
    Description: [...]
    Notes and improvements: [...]
    -->
    <html>
      <head>
        <title>
          Upload and preview an image with Ajax
        </title>    
        <script language="JavaScript" type="text/javascript">
          
          var loadingHtml = "Loading..."; // this could be an animated image
          var imageLoadingHtml = "Image loading...";
        	var http = getXMLHTTPRequest();
          //----------------------------------------------------------------
        	function uploadImage() {
            var uploadedImageFrame = window.uploadedImage;
        	  uploadedImageFrame.document.body.innerHTML = loadingHtml;
        	  // VALIDATE FILE
            var imagePath = uploadedImageFrame.imagePath;
            if(imagePath == null){
              imageForm.oldImageToDelete.value = "";
            }
            else {
              imageForm.oldImageToDelete.value = imagePath;
            }
            imageForm.submit();
          }
          //----------------------------------------------------------------
          function showImageUploadStatus() {
            var uploadedImageFrame = window.uploadedImage;
            if(uploadedImageFrame.document.body.innerHTML == loadingHtml){
              divResult.innerHTML = imageLoadingHtml;
            }
            else {
              var imagePath = uploadedImageFrame.imagePath;
              if(imagePath == null){
                divResult.innerHTML = "No uploaded image in this form.";
              }
              else {
                divResult.innerHTML = "Loaded image: " + imagePath;
              }
            }
          }
          //----------------------------------------------------------------
          function getXMLHTTPRequest() {
          	try {
            	xmlHttpRequest = new XMLHttpRequest();
          	}
          	catch(error1) {
            	try {
              	xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
              }
              catch(error2) {
          	    try {
          		    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
          	    }
          	    catch(error3) {
          		    xmlHttpRequest = false;
          	    }
              }
            }
            return xmlHttpRequest;
          }
          //----------------------------------------------------------------
          function sendData() {
          	var url = "submitForm.php";
            var parameters = "imageDescription=" + dataForm.imageDescription.value;
            var imagePath = window.uploadedImage.imagePath;
            if(imagePath != null){
              parameters += "&uploadedImagePath=" + imagePath;
            }
            
          	http.open("POST", url, true);
        
            http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            http.setRequestHeader("Content-length", parameters.length);
            http.setRequestHeader("Connection", "close");
        
          	http.onreadystatechange = useHttpResponse;
          	http.send(parameters);
          }
          //----------------------------------------------------------------
          function submitFormIfNotImageLoading(maxLoadingTime, checkingIntervalTime) {
            if(window.uploadedImage.document.body.innerHTML == loadingHtml) {
              if(maxLoadingTime <= 0) {
                divResult.innerHTML = "The image loading has timed up. "
                                    + "Please, try again when the image is loaded.";
              }
              else {
                divResult.innerHTML = imageLoadingHtml;
                maxLoadingTime = maxLoadingTime - checkingIntervalTime;
                var recursiveCall = "submitFormIfNotImageLoading(" 
                                  + maxLoadingTime + ", " + checkingIntervalTime + ")";
                setTimeout(recursiveCall, checkingIntervalTime);
              }
            }
            else {
              sendData();
            }
          }
        	//----------------------------------------------------------------
          function submitForm() {
            var maxLoadingTime = 3000; // milliseconds
            var checkingIntervalTime = 500; // milliseconds
            submitFormIfNotImageLoading(maxLoadingTime, checkingIntervalTime);
          }
          //----------------------------------------------------------------
          function useHttpResponse() {
          	if (http.readyState == 4) {
            	if (http.status == 200) {
              	divResult.innerHTML = http.responseText;
              	dataForm.reset();
              	imageForm.reset();
              	window.uploadedImage.document.body.innerHTML = "";
              	window.uploadedImage.imagePath = null;
            	}
          	}
          }
    
        </script>
      </head>
      <body>
        <h3>
          Form with preview of resized image with Ajax
        </h3>
        <form id="dataForm" name="dataForm">
          Image description: 
          <input name="imageDescription" id="imageDescription" type="text" 
                size="30"/>
        </form>
        
        <form id="imageForm" name="imageForm" enctype="multipart/form-data"
              action="uploadImage.php" method="POST" target="uploadedImage">
          <!-- Next field limits the maximum size of the selected file to 2MB.
               If exceded the size, an error will be sent with the file. -->
          <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
          Image: 
          <input name="imageToUpload" id="imageToUpload" type="file"
                onchange="uploadImage();" size="30"/>
          <br />
          Old uploaded image to delete (this field should be hidden):
          <br />
          <input name="oldImageToDelete" id="oldImageToDelete" type="text"
                size="50" />
        </form>
        
        <iframe id="uploadedImage" name="uploadedImage" src="" 
              style="width:200px; height:200px;"
              frameborder="0" marginheight="0" marginwidth="0"></iframe>
        
        <br /><br />
        
        <form>
        <input type="button" onclick="submitForm();" value="Submit" />
        </form>
    
        <br />
        
        <form>
        <input type="button" onclick="showImageUploadStatus();" value="Show image upload status" />
        </form>
        
        <div id="divResult"></div>
    
      </body>
    </html>
    Attached Files Attached Files

  2. #2
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Here are the php scripts.

    uploadImage.php
    PHP Code:
    <?php
    /*
    Author: Alberto Moyano Sánchez
    Date: 2009-05-24

    Description:
    - The script receives a file and a text with method="post".
    - The file is validated to check that is a supported type of image, has no
      errors and is not larger than the maximum size allowed.
    - If the dimensions of the image are larger than the maximum, it is resized.
    - The image is uploaded to a temporary directory in the server.
    - If the uploading was right, the script outputs an img html tag with the
      uploaded image, and a JavaScript variable with the temporary path of the
      uploaded image. If there was any error, the script outputs an error message. 
    - If a text is sent a together with the file, it means that there was an
      image previously uploaded. This text is the path of the previously uploaded
      image, and it is removed before the new image is uploaded. 
    */
    $pathToUpload "uploads_temp/";
    $fileFieldName "imageToUpload";
    // "image/pjpeg" is the type jpg for Internet Explorer
    $allowedImageTypes = array("image/png""image/jpg""image/jpeg",
                               
    "image/pjpeg""image/gif");
    $maxImageSize 2000000// in bytes
    //-----------------------------------------------------------------------------
    function displayImage($imagePath) {
      
    // BUG: the uppercase is very important. The extension of the image must
      //      be uppercase, if not, it is displayed distorted (Firefox 3.0.10)
      
    echo "<img src='" strtoupper($imagePath) . "' />";
      echo 
    "<script type = 'text/javascript'>";
      echo 
    "var imagePath = '" $imagePath "';";
      echo 
    "</script>";
      
    // delay to test the uploading of the image
      //sleep(6);
    }
    //-----------------------------------------------------------------------------
    // the functions imagecreateXXX raise a fatal error when trying
    // to create an image larger than 3 MB
    function createImageFactory($imagePath$imageType) {
      
    $image null;
      if(
    $imageType == "image/png") {
        
    $image imagecreatefrompng($imagePath);
      }
      else if(
    $imageType == "image/gif") {
        
    $image imagecreatefromgif($imagePath);
      }
      else {
        
    $image imagecreatefromjpeg($imagePath);
      }
      return 
    $image;
    }
    //-----------------------------------------------------------------------------
    function saveImage($image$imagePath$imageType) {
      
    $resultSave false;
      if(
    $imageType == "image/png") {
        
    $resultSave imagepng($image$imagePath);
      }
      else if(
    $imageType == "image/gif") {
        
    // if the gif is animated, the function imagegif doesn't keep the
        // animation. The animation is lost in the process creating, resampling
        // and saving the image
        
    $resultSave imagegif($image$imagePath);
      }
      else {
        
    $resultSave imagejpeg($image$imagePath80);
      }
      return 
    $resultSave;
    }
    //-----------------------------------------------------------------------------
    function createNewImage($width$height$imageType) {
      
    $image imagecreatetruecolor($width$height);
      
    // set the transparency if the image is png or gif
      
    if(($imageType == "image/png") || ($imageType == "image/gif")) {
        
    imagealphablending($imagefalse);
        
    imagesavealpha($imagetrue);
        
    $transparent imagecolorallocatealpha($image255255255127);
        
    imagefilledrectangle($image00$width$height$transparent);
      }
      return 
    $image;
    }
    //-----------------------------------------------------------------------------
    function uploadResizedImage($sourceImagePath$destinationImagePath$imageType) {
      
    $resultSave false;
      list(
    $width$height) = getimagesize($sourceImagePath);
      
    $maximumDimension 200;
      if((
    $maximumDimension >= $width) && ($maximumDimension >= $height)) {
        
    // with the process of creating, resampling and saving the image, the
        // animation of an animated gif is lost. In order to keep the possible 
        // animation, if the image is smaller than the maximum size, it is
        // uploaded without any processing
        
    $resultSave move_uploaded_file($sourceImagePath$destinationImagePath);
      }
      else {
        
    // the function createImageFactory raises a fatal error when trying
        // to create an image larger than 3 MB
        
    $sourceImage = @createImageFactory($sourceImagePath$imageType);
        if(
    $width $height) {
          
    $newWidth round($maximumDimension);
          
    $newHeight round($height * ($newWidth $width));
        }
        else {
          
    $newHeight round($maximumDimension);
          
    $newWidth round($width * ($newHeight $height));
        }
        
    $destinationImage createNewImage($newWidth$newHeight$imageType);
        
    // the function imagecopyresampled is much better than the function
        // imagecopyresized, which distorts the image when resizing
        
    $resultResize imagecopyresampled($destinationImage$sourceImage
                        
    0000$newWidth$newHeight$width$height);
                        
        if(
    $resultResize) {
          
    $resultSave saveImage($destinationImage$destinationImagePath$imageType);
        }
      }
      
      return 
    $resultSave;
    }
    //-----------------------------------------------------------------------------
    // if there was an image uploaded before, remove it, because it is being
    // substituted by another one
    $oldImageToDelete $_POST["oldImageToDelete"];
    if((
    $oldImageToDelete != null) && (file_exists($oldImageToDelete))) {
      
    unlink($oldImageToDelete);
    }
    // it must be checked first if there is an error with the file (e.g.
    // larger than the maximum size allowed by the hidden field MAX_FILE_SIZE
    // in HTML) than if type of the file is an allowed type, because if there 
    // is an error, the type of the file may not be available
    if ($_FILES[$fileFieldName]["error"] > 0) {
      echo 
    "There is an error with the file.";
      echo 
    "<br />";
      echo 
    "Error code: " $_FILES["imageToUpload"]["error"];
    }
    else if(!
    in_array($_FILES[$fileFieldName]["type"], $allowedImageTypes)) {
      echo 
    "The type of the file is not a supported image type.";
      echo 
    "<br />";
      echo 
    "FILE: " $_FILES[$fileFieldName]["name"];
      echo 
    "<br />";
      echo 
    "File type: " $_FILES[$fileFieldName]["type"];
    }
    else if(
    $_FILES[$fileFieldName]["size"] > $maxImageSize) {
    // the function createImageFactory, called by uploadResizedImage raises 
    // a fatal error when trying to create an image larger than 3 MB
      
    echo "The uploaded file is larger than allowed.";
      echo 
    "<br />";
      echo 
    "Uploaded file size: " round($_FILES[$fileFieldName]["size"] / 1000) . " KB";
      echo 
    "<br />";
      echo 
    "Max allowed size: " round($maxImageSize 1000) . " KB";
    }
    else {
      
    $imagePath $pathToUpload basename($_FILES[$fileFieldName]["name"]);
      if (
    file_exists($imagePath)) {
        
    unlink($imagePath);
      }
      if(
    uploadResizedImage($_FILES[$fileFieldName]["tmp_name"], $imagePath$_FILES[$fileFieldName]["type"])) {
        
    displayImage($imagePath);
      }
      else {
        echo 
    "There was an error uploading the file" $imagePath ", please try again!";
        echo 
    "<br />";
        echo 
    "If the error continues, the uploaded file may not be accepted by the system.";
      }
    }
    ?>
    submitForm.php
    PHP Code:
    <?php
    /*
    Author: Alberto Moyano Sánchez
    Date: 2009-05-24

    Description:
    - The script receives some data with method="post".
    - One of this data may be a path of an image that was previously uploaded
      to a temporary directory in the server. If this datum exists, the script
      move the image from the temporary directory to a final one.
    - The script process the rest of the data and produces some output. 
    */
    $pathToMove "uploads/";

    $imagePathParameterName "uploadedImagePath";
    $imageDescriptionParameterName "imageDescription";

    $imagePath $_POST[$imagePathParameterName];
    $description $_POST[$imageDescriptionParameterName];

    // the funtion file_exists doesn't find files whose name has special
    // characters, like tildes
    if (($imagePath != null) && (file_exists($imagePath))) {
      
    $imagePathToMove $pathToMove basename($imagePath);
      if(
    file_exists($imagePathToMove)) {
        
    unlink($imagePathToMove);
      }
      if(
    rename($imagePath$imagePathToMove)) {
        echo 
    "The image " $imagePathToMove " was stored with the description '" $description "'.";
      }
      else {
        echo 
    "There was an error moving the file " $imagePath " to " $imagePathToMove;
      }
    }
    else {
      echo 
    "No image was uploaded for the description '" $description "'.";
    }
    ?>

  3. #3
    Join Date
    May 2009
    Posts
    150
    That's going to be very annoying if they keep changing their minds or selecting the wrong file with the file being repeatedly uploaded when they don't want it to be. You also upload the final image twice, once when they select it and once when they submit it, which seems very inefficient. If they make a mistake once (there's no cancel), change their minds once and then submit they've uploaded up to 8Mb of data, I don't want to be doing that for a 2Mb file, I doubt other people will either.

    I could also go into some things about your implementation, but won't bother given that what you're implementing is fundamentally flawed IMHO.

    I suggest you look into another language like Flash or Java which can do this natively.

  4. #4
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Hello,

    Thank you for the reply. I'd like to reply it too.

    That's going to be very annoying if they keep changing their minds or selecting the wrong file with the file being repeatedly uploaded when they don't want it to be.
    The user doesn't have to change his mind. He only selects a file and it is automatically processed. The file can be a wrong type, and it would not be uploaded. It is made with a JavaScript validation (in the uploadImage() function), which I have not included to test the php validation. Sorry, it is in the comments of the html file, which I removed because it was too long for a post.

    You also upload the final image twice, once when they select it and once when they submit it, which seems very inefficient.
    The file is uploaded only once: when it is selected. When the form is submitted, the file is moved from a temporary directory to the final one. Then it will be much faster because it is done at the server side (not uploading at all), and the image is already resized.

    If they make a mistake once (there's no cancel), change their minds once and then submit they've uploaded up to 8Mb of data, I don't want to be doing that for a 2Mb file, I doubt other people will either.
    There is a size limitation of 2MB, but it could be 3MB or 500KB. It must be validated with JavaScript previously to send the file. The idea of the system is not to be an image browser, but to upload an image for an avatar or something like this. So it is not expected that the user will upload an 8000KB image to resize it to 20KB.

    I could also go into some things about your implementation, but won't bother given that what you're implementing is fundamentally flawed IMHO.

    I suggest you look into another language like Flash or Java which can do this natively.
    That is what I didn't want to do. I'm using the most simple languages, just plain html and JavaScript, and php at server side. No more.

  5. #5
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Here are the complete explanatory comments of the html file. Here it is explained that there should be a JavaScript validation before automatically sending the selected file or where can be adjusted a delay for testing the delay time of uploading.

    Regards

    HTML Code:
    <!--
    Description:
    - This is a script to upload a form dynamically with Ajax, which contains an
      image and more data. The image is displayed in preview when it is selected.
    - It consists of one html page and two php scripts. I wanted to do the
      funtionality of the first php script, which resizes the selected image,
      with Ajax instead of php. But it is not possible due to the limited action
      of JavaScript over the file field and the filesystem, because of security
      reasons. 
    - There are actually two forms, one for the image and another for the rest
      of the data. (The reason is that JavaScript cannot take the selected file
      of the file field. It is explained some points below.) There is also an
      iframe which displays the image.
    - The image form is automatically submited when a new file is selected. It is
      sent to a php script which resizes the image, stores it in a temporary 
      directory and displays it. The target of the image form is the iframe, so
      the image is displayed in it without need of reloading the whole page.
    - The php script also writes in the iframe a control variable containing the
      temporary path of the uploaded image. This variable is key to dynamically
      upload the data form with Ajax.
    - I wanted to do the resizing and previewing of the image with JavaScript,
      saving the submitting of the image form and the processing of the image
      at the server side. However it is not possible, because JavaScript cannot
      interact with the filesystem due to security reasons.
    - Another handicap is that JavaScript can barely manage the file field, due
      to security reasons too. JavaScript can only read the name of the selected
      file but not the whole path. JavaScript can neither take the selected file
      to send it via Ajax. Thus, the file field cannot be sent via Ajax. The only
      way it can be sent is submitting the whole form. Therefore must be a
      separate form only for the file field, in order be able to submit only this 
      field and not the rest of the fields.
    - The image form has another hidden field (for testing purpose it is visible)
      to store the name of the previous selected file, so it can be removed by
      the php script.
    - The button to submit the data form takes the data fields and the control
      variable of the iframe, which says if there is an uploaded image and what
      its temporary path in the server is. A second php script is called, which
      moves the uploaded image from the temporary directory to the final one,
      and process the rest of the data.
      
    Notes and improvements:
    - This script has been tested with Firefox 3.0.10, Opera 9.64, Safari 4
      and Internet Explorer 6.0. Everything works fine (with the exception of
      the next point).
    - The event "onchange" of the file field is well performed by all browsers
      when selecting a file with the button "browse". Firefox and Safari don't
      allow to write in the field, only to use the button to select a file.
      Explorer and Opera allow to write in the text box of the field. Explorer
      works fine and trhows the event "onchange" when the field loses the focus.
      Opera throws the event "onchange" everytime a key is pressed when typing
      in the field, what is not the desired behaviour.
    - The file to upload must be validated with JavaScript previously to send
      it in the function uploadImage().
    - If a file is sent, which is larger than the maximum size especified with
      the hidden field MAX_FILE_SIZE, PHP will throw an error, with error code
      2. To avoid such message and a futile sending, the file must be previously
      validated with JavaScript.
    - In order to test the posible delays with the uploads, adjust the sleep
      statement in the function displayImage() in the file uploadImage.php.
      Adjust also the parameters in the JavaScript function submitForm().
    - When an image is uploaded to the temporary directory to preview it, it is
      checked if there was a previously previewed image, to remove it from the
      temporary directory. However, the temporary directory must be emptied
      from time to time, because there will be files from the previewed images
      of forms that were finally not submited.
    -->

  6. #6
    Join Date
    May 2009
    Posts
    150
    Quote Originally Posted by AMS View Post
    Hello,
    The user doesn't have to change his mind. He only selects a file and it is automatically processed. The file can be a wrong type, and it would not be uploaded. It is made with a JavaScript validation (in the uploadImage() function), which I have not included to test the php validation. Sorry, it is in the comments of the html file, which I removed because it was too long for a post.
    I mean, what if you select an image, then change your mind and want to select a different one? It's still the right type so will be uploaded.

    Quote Originally Posted by AMS View Post
    The file is uploaded only once: when it is selected. When the form is submitted, the file is moved from a temporary directory to the final one. Then it will be much faster because it is done at the server side (not uploading at all), and the image is already resized.
    Fair enough

    Quote Originally Posted by AMS View Post
    There is a size limitation of 2MB, but it could be 3MB or 500KB. It must be validated with JavaScript previously to send the file. The idea of the system is not to be an image browser, but to upload an image for an avatar or something like this. So it is not expected that the user will upload an 8000KB image to resize it to 20KB.
    I meant that 4 2Mb images is 8Mb total.

  7. #7
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by Y_Less View Post
    I mean, what if you select an image, then change your mind and want to select a different one? It's still the right type so will be uploaded.
    That's true. At first I wanted to do the resizing and previewing with Ajax, and send the reduced image when the whole form was submitted. Well, this is not possible because Ajax cannot manage a file field. For this reason I had to do it at the server side with php. The good point is that after the image sending, the image management, like the preview, is done with the image already resized.

    The user can think that he wants to change the image. Still I think it is better to preview the image, so the user can see it as soon at he has selected the file, and not when the whole form is submitted and he sees the already stored data. In that case, the wrong image whould be uploaded, and the user should look for the way to edit his uploaded data.

    Quote Originally Posted by Y_Less View Post
    I meant that 4 2Mb images is 8Mb total.
    If the user wants to upload four 2MB images, he will do it, either if it is dynamically or by submitting the form. The difference is that, when it is done dynamically, every image is uploaded individually when it is selected, and meanwhile the user can do other things in the page. When it is done by submitting the form, the four images are uploaded together, and the user has to wait till the uploading process finish. I think it is better to upload 2MB four times than 8MB once, furthermore if it is not a blocking way.

  8. #8
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Moreover, if there will be many images in the form and the previewing can become a problem, a button or radio button can be placed next to every file field, to individually enable/disable the functionality.

  9. #9
    Join Date
    Jun 2009
    Posts
    2
    Hi!

    I am currently working on a project where I will need a script for uploading and resizing images such as yours. I have already started experimenting and seems to do exactly what I wnat it to, so I am happy.

    The question is how would you feel if you some time in the future saw your script, more or less as adjustments needs to be implemented, in another project.

    The project is a infoscreen system, based on php, mysql and javascript. I am building this mainly for my on workplace, but as I have ambitions I'm hoping this also could be useful for others. I plan to make it available as opensource. If you read Norwegian fairly well(as I suppose you don't), you can read about it here: http://blog.matsr.net/?page_id=128 or atleast take a look at the code so far.

    on a side note, I don't have a specific time frame yet, but I am working as fast I can, learning while doing.
    Last edited by mzaz; 06-04-2009 at 06:17 AM.

  10. #10
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Hello,

    I would be happy if my script is useful for more people besides me. I have read and used things that other people have put on the internet, and that was also the idea when I put the image preview script.

    So feel free to use, modify and distribute it as you want. The only thing I'd ask is to keep the name of the original author (me), if the script is basically the original one, i.e. it has not many modifications.

    If you have any question about the script, feel free to ask it.

    Sorry, I don't know Norwegian. As far as I can go ist ein bisschen Deutsch

    Good luck with your site!
    Last edited by AMS; 06-04-2009 at 06:57 AM.

  11. #11
    Join Date
    Jun 2009
    Posts
    2
    I felt compelled to get back to you about this... I really like your script, but I am having trouble getting it work the way I need to(some serious path issues, probably easy to fix, for someone else ).

    For the time being I have given up on making this work, and in stead trying to build from the ground up, well.. I have already stolen some of your code. (a part I had modified in your script aswell).

    What I am trying to do is put the script in: ./admin/sys/submitform.php (and uploadimage.php)

    and have them upload the images to ./images

    also I have been trying to put the javascript in: ./admin/sys/js/img_upload.js

    For some reasons it seems different browsers intrepret the paths differently(it works in chrome, but not IE or FF).

    Well I suppose this is more of an update of the status on my project, havn't been able to work on it for awhile now.. progress is slow...

  12. #12
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Have you tried the diferent forms of path? I mean:

    ../images
    ./images/
    ../images/

    I don't know where your images directory is in relation with the directory where the active php is. Use "." to refer the current active directory, and ".." to go one level up.

    Does that work?

  13. #13
    Join Date
    Oct 2009
    Posts
    8
    HI - First of all, Alberto: THANKS. Made a ton of modifications, but this is the closest thing that I could find for what I was seeking.

    I have a couple ideas/suggestions/needs/enhancement requests. They really should not be too hard, but I still have not been able to get some of them working using my own (not so good) newly acquired hacking skills!

    1. Cross Browser functionality. I was finally able to accomplish this. Firefox had issues with setting paths. I ended up creating a soft link (luckily I am the UNIX admin on my server) to the actual path to the upload directory. That directory is in / (root) of the webserver. But I also had to have a softlink in ./ (dot slash) of the local directory of the template, which originates beyond / (root)... So... not a big deal, but sure would be nice if you considered this in your next release version.

    2. Another cross browser issue I ran into... The Javascript in some browsers is VERY finicky. I had to add things like "document.getElementById" and window.uploadedImage" in front of a bunch of JS variables and thingies...

    3. (here's 1st one I haven't figured out) I would like to ALSO save the ORIGINAL uploaded pictures... say, in a folder like /images/ORIG/... Right now you do the upload and resize in "one step"... I had another script that was easy to figure out this... but I have not yet figured out how to incorporate that in to this script...

    4. (2nd mystery) although I have found a bunch of JS and PHP ways to do this, I haven't gotten the right combo, or the right place to make the modification, or something!.... but, I want the uploaded files that have any SPACES or funky characters (that I specify - like ~ or + or whatever might get through) to get those characters replaced by a dash or underscore (- or _)


    I also separated the JAVASCRIPT portions of the form into a separate my_js_functions.js file which I call in... Makes it a little neater.

    THANKS again for the good work on this. My website where you can see your script in action is: www.womendrinkingbeer.com

  14. #14
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Hi,

    Thank you for the positive feedback.

    I know this code is not the best one one could wish, but I didn't find any better way with basic technologies.

    I have also made some modifications, like placing all javascript functions in a separate file. The image form is now written by a javascript function. Thus it is very easy to have as many forms as required.

    For the "document.getElementById" I am using now the Prototype framework, so just the "$" function is enough.

    If you want to save the original file, you have just to call the function saveImage($image, $imagePath, $imageType) before resizing the image. The saving is performed by the function php imagepng($image, $imagePath), where $image is the uploaded image, and $imagePath, the file pathname where you want to save the image.

    You can find more details and an example here

    http://uk.php.net/manual/en/function.imagepng.php

    If you want to replace some characters in the name, you can use this php function

    http://uk.php.net/manual/en/function.str-replace.php

    Here you can see how to get the uploaded file name.

    http://www.w3schools.com/PHP/php_file_upload.asp

    Just curiosity, where have you seen my name? I thought it was not available in this web.

    Good luck with your scripts and your site

  15. #15
    Join Date
    Oct 2009
    Posts
    8
    Quick answer, because I'm heading to bed...

    Your name? It's in your code. I kept it there, just as you requested... Alberto Moyano Sanchez - it's right there in your code snippets! And your are AMS...

    Hope you weren't trying to stay anonymous!

    Thanks for the help and responding to my post... especially since it's been a while since you last visited.

    I'm not a coder - more of a hacker - but I've been learning a lot and picking up things here and there. I'm going to study the links and ideas you provided. I'll come back and ask more questions if I have any.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles