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 to the CF scene
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    File Upload With Preview

    Hello every one never really used a board for something like this but my java is a little limited so i need some help here if possible!

    I have a page with 5 file inputs and 5 img tags i have everything working but preview of course changes all the img tags so no madder what browse button i choose all fixed img tags are updated with that preview.

    here is a code i found and messed with a little cant seem to figure out how to add a loop or something to update just the called tag if any one could help

    Java Script:

    <script type="text/javascript">
    <!-- Begin
    /***** CUSTOMIZE THESE VARIABLES *****/
    // width to resize large images to
    var maxWidth=115;
    // height to resize large images to
    var maxHeight=115;
    // valid file types
    var fileTypes=["bmp","gif","png","jpg","jpeg"];
    // the id of the preview image tag
    var outImage="previewField";
    // what to display when the image is not valid
    var defaultPic="/images/evolve/badpic.jpg";
    /***** DO NOT EDIT BELOW *****/
    function preview(what){
    var source=what.value;
    var ext=source.substring(source.lastIndexOf(".")+1,sou rce.length).toLowerCase();
    for (var i=0; i<fileTypes.length; i++){
    if (fileTypes[i]==ext){
    break;
    }
    }
    globalPic=new Image();
    if (i<fileTypes.length){

    //FireFox
    try{
    globalPic.src=what.files[0].getAsDataURL();
    }catch(err){
    globalPic.src=source;
    }
    }else {
    globalPic.src=defaultPic;
    alert(fileTypes.join(", "));
    }
    setTimeout("applyChanges()",200);
    }

    var globalPic;
    function applyChanges(){
    var field=document.getElementById(outImage);
    var x=parseInt(globalPic.width);
    var y=parseInt(globalPic.height);
    if (x>maxWidth) {
    y*=maxWidth/x;
    x=maxWidth;
    }
    if (y>maxHeight) {
    x*=maxHeight/y;
    y=maxHeight;
    }
    field.style.display=(x<1 || y<1)?"none":"";
    field.src=globalPic.src;
    field.width=x;
    field.height=y;
    }
    // End -->

    previewField is the key i think and also of course the imageout jsut dont know how to go about making the loop if this was perl no problem but like stated above i know little about java coding but minor changes.

    below here is the some of the form code:

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td scope="col">
    <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
    <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
    </td>
    <td scope="col">
    <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
    <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
    </td>
    <td scope="col">
    <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
    <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
    </td>
    <td scope="col">
    <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
    <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
    </td>
    <td scope="col">
    <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
    <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
    </td>
    </tr>
    </table>

    also ther is one include:

    <script type="text/javascript" src="/java/si.files.js"></script>

    i went through this code file and the change does not appear to be where the change should ocur im sure its in the actually script need to loop through the images[] field i would think like i would in php

    The only thing i could think to do is paste the script code 5 more times and change each variable to 1 2 3 4 5 but then ill have a big php code page there would be a way to make this work i would think

    Thanks all and im here for PHP or Perl questions so any help would be great!
    If there is a better approach any input would be great!

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Despite the similar sounding names, Java is not the same as Javascript.
    Moving from Java forum to Javascript forum.

    Problem will come down to how you are dealing with that getElementById. It should be modify-able to add in the target img element as well. One of the client side guys could show you that.
    Last edited by Fou-Lu; 12-15-2010 at 06:35 AM.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 
    Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)


  •  

    Posting Permissions

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