stackoom
  简体   繁体   中英

upload file inside a form html

 原文  2015-02-28 10:23:45  3   4    php/ html/ forms

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 files without losing data that already fill in by the user in the form.
  2. I want the user upload the file first then user presses the submit button

this is the sequence that i want to achieve :

user open addProduct.php-> then the user fill the form -> the user upload picture -> finally the user press submit button to save their data

this is my form page 

 <?php require_once './model/functions.php'; ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="center-block" style="width: 130px;"> <h3><strong>Add Book</strong></h3> </div> </div> <form id="productform" method="post" action="test_add_product.php" class="form-horizontal"> <div class="form-group"> <label for="kategori" class="col-lg-4 control-label">Kategori : </label> <div class="col-lg-2"> <input type="hidden" class="form-control" id="main-sub-pages-id" name="category-id"> <div class="input-group"> <input type="text" class="form-control" id="main-sub-pages"> <span class="input-group-btn"> <button type="button" class="btn btn-default" data-toggle="modal" data-target=".category-modal"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></button> </span> </div> <div class="modal fade category-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Category</h4> </div> <div class="modal-body"> <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="text-center"> <h4>Pages</h4> </div> </div> <div class="col-lg-4"> <div class="text-center"> <h4>Sub Pages</h4> </div> </div> <div class="col-lg-4"> <div class="text-center"></div> <h4></h4> </div> </div> <div class="row"> <div class="col-lg-4"> <select id="pages" name="pages" class="form-control" size="6" onchange="loadCategory('pages','sub-pages')"> <?php $subjects_set = find_all_subjects(); while($subject = mysqli_fetch_assoc($subjects_set)){ ?> <option value="<?php echo $subject["id"];?>"><?php echo $subject["name"]; ?></option> <?php } ?> </select> </div> <div class="col-lg-4"> <select id="sub-pages" name="pages" class="form-control" size="6"> </select> </div> <div class="col-lg-4"> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveCategory()">Save changes</button> </div> </div> </div> </div> </div> </div> <div class="form-group"> <label for="tipeIklan" class="col-lg-4 control-label">Tipe Iklan : </label> <div class="col-lg-6"> <label class="radio-inline"> <input type="radio" name="tipeIklan" id="tipeIklan" value=0>Dicari </label> <label class="radio-inline"> <input type="radio" name="tipeIklan" id="tipeIklan" value=1 checked="checked">Dijual </label> <label class="radio-inline"> <input type="radio" name="tipeIklan" id="tipeIklan" value=2>Disewakan </label> <label class="radio-inline"> <input type="radio" name="tipeIklan" id="tipeIklan" value=3>Jasa </label> </div> </div> <div class="form-group"> <label for="judul" class="col-lg-4 control-label">Judul : </label> <div class="col-lg-6"> <input type="text" class="form-control" id="judul" name="judul" placeholder="Judul iklan anda"> </div> </div> <div class="form-group"> <label for="deskripsi" class="col-lg-4 control-label">Deskripsi : </label> <div class="col-lg-6"> <textarea id="deskripsi" class="form-control" rows="5" name="description"></textarea> </div> </div> <div class="form-group"> <label for="harga" class="col-lg-4 control-label">Harga(Rp.) : </label> <div class="col-lg-3"> <input type="text" class="form-control" id="harga" name="harga" aria-describedby="helpBlock" placeholder="cukup tuliskan angka" onfocus="toolTipHarga()"> </div> </div> <div class="form-group"> <label for="kondisi" class="col-lg-4 control-label">Kondisi : </label> <div class="col-lg-6"> <label class="radio-inline"> <input type="radio" name="kondisi" id="kondisi" value=0>Bekas </label> <label class="radio-inline"> <input type="radio" name="kondisi" id="kondisi" value=1 checked="checked">Baru </label> </div> </div> <div class="form-group"> <label for="provinsi" class="col-lg-4 control-label">Provinsi : </label> <div class="col-lg-3"> <select id="provinsi" name="provinsi" class="form-control" onchange="loadLocation('provinsi', 'kota')"> <option>Select one</option> <?php $provinsi_set = find_all_province(); while($provinsi = mysqli_fetch_assoc($provinsi_set)){ ?> <option value="<?php echo $provinsi["id"];?>"><?php echo $provinsi["nama"]; ?></option> <?php } ?> </select> </div> </div> <div class="form-group"> <label for="kota" class="col-lg-4 control-label">Kota : </label> <div class="col-lg-3"> <select id="kota" name="kota" class="form-control"> </select> </div> </div> <div class="form-group"> <label for="foto" class="col-lg-4 control-label">Upload Foto : </label> <div class="col-lg-6"> <div class="row"> <?php //scan "uploads" folder and display them accordingly $folder = "uploads"; $results = scandir('uploads'); foreach ($results as $result) { if ($result === '.' or $result === '..') continue; if (is_file($folder . '/' . $result)) { echo ' <div class="col-md-3"> <div class="thumbnail"> <img src="'.$folder . '/' . $result.'" alt="..."> <div class="caption"> <p><a href="remove.php?name='.$result.'" class="btn btn-danger btn-xs" role="button">Remove</a></p> </div> </div> </div>'; } } ?> </div> <div class="row"> <form class="well" action="upload.php" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="file">Select a file to upload</label> <input type="file" name="file"> <p class="help-block">Only jpg,jpeg,png and gif file with maximum size of 1 MB is allowed.</p> </div> <input type="submit" class="btn btn-lg btn-primary" value="Upload"> </form> </div> </div> </div> <div class="col-lg-offset-4"> <button type="submit" id="registrationbutton" class="btn btn-default">Tayangkan!</button> </div> </form> </div> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script type="text/javascript"> $("#registrationbutton").click(function(){ if(!validateText("main-sub-pages")) { return false; } if(!validateText("judul")) { return false; } if(!validateText("deskripsi")) { return false; } if(!validateText("harga")) { return false; } if(!validateNumber("harga")) { } if(!validateText("provinsi")) { return false; } if(!validateText("kota")) { return false; } $("form#productform").submit(); }); </script> <?php close_connection(); ?> </body> </html>

note : as you can see, i had form inside a form

what i want to achieve was this

4 answers

solution1
 1  2015-02-28 12:14:10

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,eg 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/");
                    }
                }
            }

solution2
 0  2015-02-28 10:30:08

<form enctype="multipart/form-data" 

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

solution3
 0  2015-02-28 11:55:39

只需在您的表单中添加此enctype type属性，就不会失去上传数据的质量

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

solution4
 -1  2015-02-28 10:43:46

使用swfupload上载技术。在浏览时上载数据并返回上载文件的名称。此后，当用户单击“提交”时，将该文件名和其他表单字段存储到数据库中。

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Upload a file, but not inside a form Check if a file is in a html upload form? Selecting html class inside modal with JS to show name of file in upload form (in Laravel) File Upload inside regular form not getting uploaded Upload a file using PHP inside and html document file upload doesn't work in HTML form HTML form for PHP file upload: no textbox php html file upload form validation error renaming file after upload from html form Require upload of a file in HTML/PHP form
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM