|
JavaScript - 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! Similar Tutorialswhen client uploads any image at that time before uploading the image i want to display that image to the client. so please provide me the snippet of javascript to achieve this thing. Code: <img id="previewField" name="previewField" width="100" height="100" /> <input type="file" id="picField" onchange="document.previewField.src=this.value;"> but i am not able to preview this image on mozilla so please provide me the solution for this or if it it possible using ajax then also please provide the solution. the altimate goal is: the local image which is suppose to be uploaded should first be previewed to the client or uploder. Have the followig questions and need answers regarding the following script that will Preview a Photo before upload. The script is from http://jsbin.com/uboqu3/edit#javascript,html 1) The script works for Firefox, no good for IE. How to make it works for IE? 2) It does not have a method to delete the photo. Needs something like a small image "X" installed on the Preview Photo, clicking this "X" will delete the photo. Can anyone supply this solution? Code: <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>
Hi guys, On the back of my image preview issue (which is now fixed) I am having another problem. I am trying to get a file upload that will allow you to preview the html page in a popup on the click of a button. Can this be done? I have the preview button that creates the popup but at the moment it only shows the name of the file that's to be uploaded. Code below Code: <html>
<head>
<title>File Uploading Form</title>
</head>
<body>
<h3>File Upload:</h3>
Select a file to upload: <br />
<form method='post' action='upload.php' enctype="multipart/form-data" class="pure-form">
<input type="file" name="files[]" multiple="multiple" id="files">
<input type="button" value="Preview" onclick="displayHTML(this.form)">
<input type='submit' value='Submit' class="pure-button pure-button-primary"/>
</form>
</body>
</html>
<script>
function displayHTML(form) {
var inf = form.files.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no');
win.document.write("" + inf + "");
}
</script>
Reply With Quote 01-24-2015, 04:56 PM #2 jmrker View Profile View Forum Posts Senior Coder Join Date Aug 2006 Location FL Posts 3,175 Thanks 39 Thanked 510 Times in 504 Posts Can you use the right-click button on your mouse and "View Source", or is this not what you are trying to do? Reply With Quote 01-24-2015, 06:58 PM #3 Foster View Profile View Forum Posts Regular Coder Join Date Nov 2011 Posts 268 Thanks 8 Thanked 4 Times in 4 Posts Not what I'm trying to do. I want to be able to click the button and the file that is waiting to be opened should pop up in a new window. Reply With Quote 01-24-2015, 09:51 PM #4 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts LOOK at your code! Code: <input type="file" name=" files[] " ...rest doesn't matter... > and var inf = form. files .value; Those are *NOT* the same name in JavaScript. Only in PHP would the be (sort of) the same (and not even quite so, there). Anyway, I don't see how you can expect an HTML file that is not yet uploaded to look the same this way as it will coming from the server. ONLY if it is restricted as follows could you get the : (a) only <img> tags that use COMPLETE URLs as their src= (that is, src="http://somesite.com/somepath/someimage.pn") (b) only href's (in any kind of tag) that use COMPLETE urls. (c) only <script> tags that use src= complete urls. (d) probably other things I didn't think of Any RELATIVE urls (e.g., <img src="/images/xxx.png"/>) will be relative TO THE CLIENT MACHINE, not to the server. And how that relative path works may vary from browser to browser. Offhand, I'd say this is not a good idea. I think you should allow the upload and then preview the uploaded file in a popup window, yes, and give the user the opportunity to delete the just-uploaded file from the server. hi i m creating a webpage using javascript and php where i need to upload a doc file or zip and read all the words in doc file if it is zip i need to read all the words in all the doc files. i m trying to upload using file input but it does not show path of file only file name how i m suppose to upload and read it. I'm hoping someone can help me out on this. I know that the input "file" type can't be customized very well using css, so I figured I might try to make my own with javascript. The only problem is, I don't know too much about javascript. So can someone please point me in the right direction on how to make my own custom file upload box in javascript that works the same way as the default one works (so I don't have to edit my PHP coding). Thank you so much! Also, heres something I'd like to achieve: The box I'd like to create is at the top, while the default one is at the bottom. Hi there, I would like to know how I can show the line "Attach another File" right away, instead of what is depicted in my own code of showing it after a file has been attached. Also, I would like to align "Attach another File" to the right, so that the word "file" will be below the Browse button. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
var upload_number;
function addFileInput()
{
var d = document.createElement("div");
var file = document.createElement("input");
file.setAttribute("type", "file");
file.setAttribute("name", "attachment"+upload_number);
d.appendChild(file);
document.getElementById("moreUploads").appendChild(d);
upload_number++;
}
</script>
</head>
<body>
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<div id="moreUploads"></div>
<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Attach another File</a></div>
</body>
</html>
Hi there, I have a File Upload tool and would like to prevent the users from clicking on the textbox to upload files. Also, I want to disallow the manual entering of file pathname. How should I edit it? I would need to use Javascript. <input type="file" name="attachment" id="attachment" style="width:300px" /> I'm attempting to pull the hidden iframe file upload trick using javascript. I've go my form file upload and iframe fine, but I can't figure out what to do when it gets server side. There seems to be relatively no documentation on how to handle uploaded files in server-side javascript. Ideas? I'm at a loss.
Hi everybody, I have this File Upload control, whereby the user is granted a limit of 5 uploads. And so, the user clicks on "Attach Another File", and decides to attach a file ONLY in the first File Upload control. My problem is, I want the user to be able to click on an "X" beside every File Upload control, so that it will close those unnecessary (or unused) FIle Upload controls. How do I edit my code in JAVASCRIPT? Please advise. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript">
var fileCount = 1;
function addOneFile()
{
++fileCount;
var div = document.getElementById("showFile"+fileCount);
if ( div != null ) div.style.display = "block";
}
</script>
<style type ="text/css">
.style37
{
color: Black;
margin-left: 99px;
}
</style>
</head>
<body>
<table cellpadding="5">
<tr>
<td style="vertical-align: top">
Attachment:
</td>
<td>
<input type="file" name="attachment" id="attachment" style="width:230px" />
<div id="showFile2" style="display: none;">
<input name="file2" type="file" />
</div>
<div id="showFile3" style="display: none;">
<input name="file3" type="file" />
</div>
<div id="showFile4" style="display: none;">
<input name="file4" type="file" />
</div>
<div id="showFile5" style="display: none;">
<input name="file5" type="file" />
</div>
<br />
<a href="javascript:addOneFile();" class="style37">Attach another File</a>
<br />
(Restricted to 5 uploads)
</td>
</tr>
</table>
</body>
</html>
i have a html/php form which let users upload pictures onto my server. the problem with it is, it says the picture has been uploaded but if the file name contains any of character apart from text (A-z) and numbers, the picture never shows up in the admin panel. is there a way using ajax or jquery to disallow certain file names in the upload field of the html which uses these characters !@#$%^'&*()"? how do i go on about this? hi, i am using <input type = "file" id = "upload"> in my html page. i want to disable the textbox of this control so that user cannot type any file location here. user can upload file only through browse button. is there a way to disable this textbox thru javascript? thnx Hey there everyone I'm a bit new to javascript and having a bit of a problem. I have a page users can click to upload a photo. When users click I want a modal window to pop up with a simple file upload input inside it and a submit button. I have this working except that when users click submit nothing happens. I'm using nyroModal http://nyromodal.nyrodev.com/#demos and the code I use is: Code: <a href="#test" class="nyroModal"><img src="/img/uploadimage.gif" alt="" /></a> <div id="test" style="display: none; width: 600px;"> <form id="ImageUploadForm" enctype="multipart/form-data" method="post" action="images/upload" accept-charset="utf-8"> <div style="display:none;"> <input type="hidden" name="_method" value="POST" /> </div> <div class="input file"> <label for="ImageFileName">File Name</label> <input type="file" name="data[Image][fileName]" id="ImageFileName" /> </div> <div class="submit"><input type="submit" value="Upload" /> </div> </form> </div> If I take the code out of the div=id"test" the form appears on the normal page and submits just fine. Inside the test div tho the modal window pops up with the form inside but the submit button does nothing. Can anyone enlighten me what I'm doing wrong? I am trying for a javascript code that would ask for the excel file location when run, fetch data from two columns till eof in an excel file (MS Excel 2010), append it to an existing text file and upload the plain text file to an ftp location. The ftp username, password and location needs to be hard coded in the script. Is this possible? Hello I currently have a little problem with displaying an image preview on a form basically when the form is filled out, the form fills out a birth certificate for bears. Below show the layout of the form before the certificate is filled out So hopefully you get the idea from this screenshot You browse for the image and once u have selected the image it will appear in the "orangy" box called image preview. would any1 have any codes that would make this functionable? If so it would be very much appreciated I am setting up a store for stationery. One cool aspect is for the online user to be able to type in what they want on the stationery, choose the font, and hit a "PREVIEW" button, showing an exact preview of what it should look like. I am having trouble on how to do this. Virtuemart and its forums are useless and helpless. Joomla suprisingly doesn't have an extension for this. Looks like I'm gonna have to hard code this baby. What would the best angle be to attack this? Should I try some interactive flash/AS3 or some good ol JS? There will be over 500 products so I am trying to pick YOUR expert brain before I tackle this beast. Thanks for any input! I am trying to mimic the video mouseover preview which can be viewed at the website below once you put your mouse over a picture a video preview window is opened which plays back the video and stops once the mouse is moved. http://videocopilot.net/tutorials/ How can i mimic this effect... any suggestions? hi, i upgraded my SWF object about 3 months ago and have been trying to find a way to add the preview back in there, but dont know how with the new process since what i had originally was ancient. the old code was like this Code:
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=$ROOT/movies/$sql_array->vid_id.flv');
s1.write('preview');
</script>
the issue is that the new way is totally differnent - no longer do you have the javascript and embed on the same page, the javascript goes in the header and the view code goes in the file now. so how do i add this to the new way of coding. Code:
s1.write('preview');
here is the new way of doing it and this is in the php header Code: <script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("player", "9.0.0");
</script>
and then this is in the the files you want to display the video on Code:
<object classid="clsid: my class id went here" width="175" height="175" id="player" name="player" align="middle">
<param name="movie" value="player.swf" />
<param name="play" value="false" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=<?=$ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="player.swf" width="175" height="175" align="middle">
<param name="play" value="false" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=<?=$ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
i think i can add it is a param flashvar but im not sure how on this code Just fyi i upload my vids using FFMPEG so in the dir there is a flv and associated jpg for the view for each vid. in other words there is a 1.flv and a 1.jpg i just need to figure out how to display the jpg for each vid in the code above. Hi, I've been inherited a website from another web developer and I need to fix his code. In one part of the admin system, the user selects a template for the newsletter to use, types the subject and body text into a form, then submits it using a submit button. There is no problem with this code and the user is able to send newsletters out using the standard template (there is only one template). However, they require a preview button to check it looks how they want it to on the template. to get to the preview page (preview_mailing.php?template=1), there is a Javascript preview button, which uses the following code: Code: <script>
function get_radio_value()
{
for (var i=0; i < document.add_form.template.length; i++)
{
if (document.add_form.template[i].checked)
{
return rad_val = document.add_form.template[i].value;
}
}
}
</script>
<a href="javascript:;" title="Preview" target="_self" class="button" onclick="MM_openBrWindow('preview_mailing.php?template=' + get_radio_value(),'preview','scrollbars=yes,width=600,height=800');return false">Preview</a>
<br/>
When you click on this button, however, it does absolutely nothing and shows javascript:; as the link, but I'm sure this is what it is meant to show as the link? I would like to create a print preview window that will display only the main content of the page that a person would really want to print. I found a script that didn't do that, but that I was able to adapt, somewhat. It doesn't fully work though and I can't get it any better. Here is what I have... <html> <head> <title></title> <script LANGUAGE="JavaScript"> function displayHTML(printContent) { var inf = printContent; win = window.open("print.htm", 'popup', 'toolbar = no, status = no'); win.document.write(inf); } </script> </head> <body> <div id="printarea">Print this stuff.</div> <a href="javascript:void(0);" onclick="displayHTML(printarea.innerHTML)">Print Preview</a> </body> </html> In mozilla it opens the new window but continues to be thinking about something indefinitly. In Safari the new window opens but there is no content. In IE it seems to work fine. I haven't tested NS yet, nor have I tested any of this on a PC. Thanks for any help. area of an image on which the mouse is positioned should only show in the preview, not the full image .. is this posible if yes how ?? Plz suggest me something ........... Samaiya |
|||||||