upload file inside a form html

Question

I want to create a form to submit a product which has a features to upload images inside the form.

my difficulties are :

1. I find it hard to upload file

Answer 1

<form enctype="multipart/form-data" 

just add an attribute 'enctype="multipart/form-data"' into your form attribute.

Answer 2

When working with uploading data,say, image. you should add the enctype form as others suggested.

<form id="productform" method="post" 
enctype="multipart/form-data" action="test_add_product.php" 
class="form-horizontal">
.............
</form>

Here's the uploader script of Javascript as follows:

<script>
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("file").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("imgTampil").src = oFREvent.target.result;
};
</script>
<img id="imgTampil" alt="" src="" class="img-responsive"/>
<input id="file" type="file" name="file" onchange="displ_img();" class="btn btn-default" />
<script>
function displ_img() {
//to display the image
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("file").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("imgTampil").src = oFREvent.target.result;
};
};
</script>

Place the scriptabove wherever you wish,e.g. above submit button.

UPDATED: Codes to upload image in PHP (for ex.):

$uploadpath='../usrphoto/'; //image path 
$allowtype=array('gif','jpg','png');
$allowsize=71250;


if(isset($_FILES['file']) && strlen($_FILES['file']['name']) > 1){
            $uploadpath=$uploadpath . basename( $_FILES['file']['name']);
            $sepext=explode('.', strtolower($_FILES['file']['name']));
            $type=end($sepext); 
            if(!in_array($type, $allowtype)){
                echo "<script>alert('Format file tidak valid! (format:gif,jpg &amp; png)');</script>";
                header("Location: http://www.mywebsite.com/");
                }
            elseif ($allowsize>71250){
                echo "<script>alert('Ukuran photo anda terlalu besar! (maks.41 Kilobytes)');</script>";
                header("Location: http://www.mywebsite.com/");
                }
            else{
                if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadpath)){ 
                    echo 'successfully uploaded!';
                else{
                    header("Location: http://www.mywebsite.com/");
                    }
                }
            }

Answer 3

use swfupload upload technique..it uploads data while browsing and returns the name of the uploaded file.. After that when user will click submit, store that filename with other form fields into database.

Answer 4

Just add this enctype type attribute in your form it will not loose the quality of the uploaded data

<form enctype="multipart/form-data">