html form file upload post

Today I was working on trying to figure this application called fontello which I did. Then came the part of learning how to use their API but couldn’t get it to work. Kept getting error messages such as ‘Missed “config” param – must be file’ when I was already specifying the config file input field name in the form. After some trial and error I got it to work and here is what I learned

jquery doens’t do file upload ajax calls

online http request maker such as http://www.requestmaker.com/ dont do file upload, at least I couldn’t figure it out.

using html form, if you’re using the method post and using a file upload input (<input type=”file” name=”config”>) in the form tag it must have enctype=”multipart/form-data” or it wont work

Here is the complete code

<form action="http://fontello.com/" method="post" enctype="multipart/form-data">
Select a file: <input type="file" name="config">
<input type="submit">
</form>

>Downloading files using PHP

>Put the file you wish to download in your website directory. Example:
/file.rar

Now when you want to download it just go http://mysite.com/file.rar

It’s that simple, don’t over complicated it and you don’t need PHP. Yesterday I tried to figure out how to download files but ran across all kinds of complicated methods. Using HTTP heaters, download helper; force_download in codeigniter, and PEAR. Maybe the reason I had such a hard time finding the solution was because its too obvious. Shot! I personally missed it.

>Resizing <Table> with CSS. Staying within the wrapper

>Having issues with keeping the table as the same size of the wrapper or parent? See code below.


<style>
/*Center the content*/
#wrapper {
margin: 0px auto;
width: 230px;
height: 100px;
background: grey; /*this is only to show how the table is within the wrapper*/
}
table {
table-layout:fixed; /*makes the table to be a specific size*/
width: inherit; /*need to be include to make the table specific size*/
}
input {
width: 100%;/*size of the input box, keeps the table inside the wrapper*/
}
th{
overflow: hidden; /* hides text overflowing the field*/
}
</style>


<div id="wrapper">
<table border="1">
<tr>
<th id="livesearch">Date</th>
<th id="livesearch2">First_Name</th>
<th id="livesearch3">Last_Name</th>
</tr>
<tr>
<!--the onfocus and onblur what makes the <th> resize when selected, this is not necessary to make the table a fixed size-->
<td ><input onfocus="document.getElementById('livesearch').style.width='100px';" onblur="document.getElementById('livesearch').style.width='auto';"class="date" type="text" /></td>
<td> <input onfocus="document.getElementById('livesearch2').style.width='100px';" onblur="document.getElementById('livesearch2').style.width='auto';" class="type" type="text" /></td>
<td> <input onfocus="document.getElementById('livesearch3').style.width='100px';" onblur="document.getElementById('livesearch3').style.width='auto';" class="type" type="text" /></td>
</tr>
</table>
</div>

Notes: Overflow in table, wrap text in table, table width

>Center HTML/Webpage

>To center your webpage its simple. By setting the width and margin you can achieve this. However, depending on the browser (Internet Explorer) you must include the doctype or it will not work. See the code below

<!DOCTYPE html>
<html>
<body>
<head>
<style>
    #main { 
	    width: 900px; 
        margin: 0 auto; 
    }
</style>
</head>
<body>
    <div id="main">
    </div>
</body>
</html>

resource:
http://www.tipue.com/blog/center-a-div/

>How to redirect

>Below are examples on how you can redirect your website. When someone visits your site and you want the traffic to go somewhere else. Choose your language, modify url and copy and paste.

Javascript:


<script>
location.replace("http://baligena.com") //or
location = "http://baligena.com";
</script>

PHP:


<?php
header( 'Location: http://www.baligena.com' ) ;
?>

HTML:


<meta HTTP-EQUIV='REFRESH' content='0'; url='http://www.baligena.com'>

>Creating columns in website

>This tutorial shows how to create columns in website and prevents the div from wrapping when the browser is minimized

Syntax Source:

<html>
<head>
<style>
#main {
width: 600px;
}

.col {
float: left;
border: 1px solid red;
padding: 10px;
margin: 0px 20px 0px 0px;
}
</style>
</head>
<body>

<h1>Columns</h1>
<div id="main">
<div class="col">
<h3>Title</h3>
<p>asdfasdfxiv</p>
<p>asdfasdfxiv</p>
<p>asdfasdfxiv</p>
</div>
<div class="col">
<h3>Title</h3>
<p>asdfasdfxiv</p>
<p>asdfasdfxiv</p>
<p>asdfasdfxiv</p>
</div> <div class="col">
<h3>Title</h3>
<p>asdfasdfxiv</p>
<p>asdfasdfxiv</p>
<p>asdfasdfxiv</p>
</div>
</div>
</body>
</html>