Upload File Inside A Form Html

I want to create a form to submit a product which has a features to upload images inside the form. my difficulties are : I find it hard to upload files without losing data that a

Solution 1:

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 = newFileReader();
oFReader.readAsDataURL(document.getElementById("file").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("imgTampil").src = oFREvent.target.result;
};
</script><imgid="imgTampil"alt=""src=""class="img-responsive"/><inputid="file"type="file"name="file"onchange="displ_img();"class="btn btn-default" /><script>functiondispl_img() {
//to display the imagevar oFReader = newFileReader();
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/");
                    }
                }
            }

Solution 2:

<form enctype="multipart/form-data" 

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

Solution 3:

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

<formenctype="multipart/form-data">

Solution 4:

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.