|
JavaScript - Image Upload
Okay so i followed a tutorial on how to create a wysiwyg rich text editor. The script has a function that makes it possible to take an image uploaded on an another site and use it. What i want though is to let the user upload an image directly into the text editor. Is there a way to do that in javascript? and if so, can you guys please help me write it, cause i can't find anything on the web about it... ?
btw, is it possible to write a function that allows the user to show a video from youtube just by entering the url address? Code: <div id="content">
<body onLoad="iFrameOn();">
<h1>Create a New Guide</h1>
<form id="form1" name="form1" method="post" action="add_guide.php">
<h3>Guide Name <input name="guide" type="text" id="guide" size="50" maxlength="50" /></h3>
<p> </p>
<p> </p>
<select name="class">
<option value="0">None</option>
<option value="1">Scout</option>
<option value="2">Soldier</option>
<option value="3">Pyro</option>
<option value="4">Demoman</option>
<option value="5">Heavy</option>
<option value="6">Engineer</option>
<option value="7">Medic</option>
<option value="8">Sniper</option>
<option value="9"selected="selected">Spy</option>
</select>
<p> </p>
<div id="wysiwyg_cp" style="padding:8px; width:700px;">
<input type="button" onClick="iBold()" value="B">
<input type="button" onClick="iUnderline()" value="U">
<input type="button" onClick="iItalic()" value="I">
<input type="button" onClick="iFontSize()" value="Text Size">
<input type="button" onClick="iForeColor()" value="Text Color">
<input type="button" onClick="iHorizontalRule()" value="HR">
<input type="button" onClick="iUnorderedList()" value="UL">
<input type="button" onClick="iOrderedList()" value="OL">
<input type="button" onClick="iLink()" value="Link">
<input type="button" onClick="iUnLink()" value="UnLink">
<input type="button" onClick="iImage()" value="Image">
</div>
<!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it -->
<textarea style="display:none" name="content" cols="50" rows="10" id="content"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
<!-- End replacing your normal textarea -->
<p> </p>
<input type="submit" name="submit" value="Submit" onClick="javascript:submit_form();" />
</form>
</div>
Code: function iFrameOn(){
richTextField.document.designMode = 'On';
}
function iBold(){
richTextField.document.execCommand('bold',false,null);
}
function iUnderline(){
richTextField.document.execCommand('underline',false,null);
}
function iItalic(){
richTextField.document.execCommand('italic',false,null);
}
function iFontSize(){
var size = prompt('Enter a size 1 - 7', '');
richTextField.document.execCommand('FontSize',false,size);
}
function iForeColor(){
var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
richTextField.document.execCommand('ForeColor',false,color);
}
function iHorizontalRule(){
richTextField.document.execCommand('inserthorizontalrule',false,null);
}
function iUnorderedList(){
richTextField.document.execCommand("InsertOrderedList", false,"newOL");
}
function iOrderedList(){
richTextField.document.execCommand("InsertUnorderedList", false,"newUL");
}
function iLink(){
var linkURL = prompt("Enter the URL for this link:", "http://");
richTextField.document.execCommand("CreateLink", false, linkURL);
}
function iUnLink(){
richTextField.document.execCommand("Unlink", false, null);
}
function iImage(){
var imgSrc = prompt('Enter image location', '');
if(imgSrc != null){
richTextField.document.execCommand('insertimage', false, imgSrc);
}
}
function submit_form(){
var theForm = document.getElementById("form1");
theForm.elements["content"].value = window.frames['richTextField'].document.body.innerHTML;
theForm.submit();
}
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. I am creating a website and there is an option for the user (after he login to the website, he enters into his workspace page)to upload a background image of his choice to his workspace page. Can the user dynamically upload a background image to his webpage? Can this be done in javascript/php? I would be glad if somebody could help me. 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>
Hello Everyone, I need to add some sort of validation that will only allow users to upload .jpg files. I really need to add this to an existing script I've already written. I've seen scripts and tutorials that add the jpg validation but only incorporate the image field of the form. I need the script to validate several forms in the field, not just one. When I try to add validation for the jpg field to the follow script everything stops working. Can someone please point me in the right direction? Thanks! Code: <form id="uploadForm" method=post class="upload" action=submit_script.php enctype='multipart/form-data' onsubmit="return validate_form(this)"> <p><b>First Name</b><br/> <INPUT TYPE="TEXT" NAME="name_first" size="40"></p> <p><b>Last Name</b><br/> <INPUT TYPE="TEXT" NAME="name_last" size="40"></p> <p><b>School Name</b><br/> <INPUT TYPE="TEXT" NAME="name_school" size="40"></p> <p><b>Your School E-Mail</b><font class="super">1</font><br/> <INPUT TYPE="TEXT" NAME="school_email" size="40"></p> <p><b>Your File</b><font class="super">4,5</font><br/> <input id="userfile1" name="userfile1" type="file" size="30"></p> <p><input name="upload" type="submit" class="box" id="upload" value="Submit Your Poster" onClick="YAHOO.example.container.wait.show();"></p> </form> Code: function validate_required_field(field,alertText) {
with (field) {
if (value==null||value=="") {
YAHOO.example.container.wait.hide();
alert(alertText);
return false;
}
else {
return true;
}
}
}
function validate_email(field,alertText)
{
with (field) {
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2) {
YAHOO.example.container.wait.hide();
alert(alertText);
return false;
}
else {
return true;
}
}
}
function validate_form(thisform) {
with (thisform) {
if (validate_required_field(name_first,"Please enter a value in the 'First Name' field before continuing")==false) {
name_first.focus();
return false
}
}
with (thisform) {
if (validate_required_field(name_last,"Please enter a value in the 'Last Name' field before continuing")==false) {
name_last.focus();
return false
}
}
with (thisform) {
if (validate_required_field(name_school,"Please enter a value in the 'School Name' field before continuing")==false) {
name_school.focus();
return false
}
}
with (thisform) {
if (validate_required_field(school_email,"Please enter a value in the 'School Email' field before continuing")==false) {
school_email.focus();
return false
}
}
with (thisform) {
if (validate_email(school_email,"Please enter a valid email address before continuing")==false) {
school_email.focus();
return false
}
}
}
i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch. can any one guide me i am new to programming Thanks in advance!!! What I am doing is building a website that teachers, instructers, etc. can build worksheets for their class. What I am trying to do is figure out a way that they could upload any image they had on there but I don't want the image to be stored on my server so as soon as they exited the site everything would reset. Is there anyway I could do that?
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 I'm looking for some help here. We've been stuck on this for 2 weeks...starting to get concerned. We're running java HTML and Ajax for a photo web app. Images have been working fine but when we did a conversion of thevwhole system away from Elgg framework to HTML, photos became completely non-functional. If you can suggest any ideas please let me know! Thanks J. Flores 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. 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! 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" /> 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>
Please help ... bit urgent I am creating a small automated system where front-end is html query form and back-end database is MS excel. both at local PC only & in a single folder. problem is like a survey form. continuous data entry, error correction, read/wite all these are included. I created a program upto first entry; but the second, third, ... entries and it is continuous. pl help me regards K.Kaniraj So I have a file that factors quadratics. It works just fine when I open the file from my desktop, but when I upload it and try to use it, the javascript stops working. Any ideas? This is the file: http://wdroom.com/factor.html You can try it out there, or you can download it. I can't get it to work at all for some reason... Thanks! The title says it all! any help would be appreciated... i have a script that will resize each image to various sizes and inserts them all into a database, the only problem is, SWFUpload isnt passing the file to the script, so its trying to process "nothing"
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? I have a page with a customizable background. The user can choose a picture to set as the background by finding the picture file they want after clicking the upload input. The path of the file they select is saved into a cookie, and the page then switches backgrounds. This all works perfectly, but the value that the upload input returns is only the file name, not the full path. For example, let's say I wanted to choose a picture named "bg.jpg" in the "Windows" folder of the C drive. The full path would be "C:/Windows/bg.jpg". However, the value that the input returns is just "bg.jpg". How would I have the input return the entire path of the file using JavaScript? This has been bothering me for a while...any help would be much appreciated. 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 |
|||||||