Lexdorf Code

Mungkin bagi sebagian sudah tidak asing dengan fitur yang sudah disediakan oleh jQuery UI ini. tapi saya akan mencoba membuat sebuah form multi select dan membaca inputan atas pilihan kita pada form tersebut.

form ini sangat berguna ketika kita ingin memilih banyak data, konsep kerja seperti dropdown, hanya saja dengan ini kita bisa memilih inputan lebih dari 1.

langsung saja berikut kodenya

index.html

<html>
<head>
<title>Multi Select</title>
<link rel="stylesheet" href="multiselect/docsupport/style.css">
<link rel="stylesheet" href="multiselect/docsupport/prism.css">
<link rel="stylesheet" href="multiselect/chosen.css">
<style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>
<body>

    <div id="container">
      <div id="content">
<form method="post" action="proses.php">
   <?php
          $array = array("1"=>"deden","2"=>"rahmi");
          echo form_multiselect('isi[] data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4"',$array);
         ?>
<input type="submit">

</form>

    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="multiselect/chosen.jquery.js" type="text/javascript"></script>
<script src="multiselect/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect' : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }
</script>

</body>
</html>

untuk source plugin akan dilampirkan pada bagian akhir artikel ini.

lalu buat proses php untuk membaca inputannya

proses.php

<?php
foreach($_POST['isi'] as $row){
            echo $row;
        }
?>

selamat mencoba , semoga bermanfaat.

link download http://www.4shared.com/zip/5hjI1_28ba/multiselect.html

Mungkin saat kita memilih file untuk di upload tidak akan nampak gambar yang kita pilih sebelum di upload. nah pada artikel kali ini, saya akan mencoba membuat sebuah upload dimana ada thumbnailnya / tampilan sebelum kita upload . ini berguna untuk meminimalisir kesalahan dalam mengupload file. sangat sederhana sekali, dimana kita menggunakan proses upload pada php dan fungsi thumbnail pada javascript.

sebelum memulai, buat satu folder untuk menampung foto yang akan diupload, beri saja nama uploads.

berikut kode HTMLnya

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>HTML5 File API</title>
    <style>
        #main {
    width: 300px;
    margin:auto;
    background: #ececec;
    padding: 20px;
    border: 1px solid #ccc;
}

#image-list {
    list-style:none;
    margin:0;
    padding:0;
}
#image-list li {
    background: #fff;
    border: 1px solid #ccc;
    text-align:center;
    padding:20px;
    margin-bottom:19px;
}
#image-list li img {
    width: 258px;
    vertical-align: middle;
    border:1px solid #474747;
}

    </style>
</head>
<body>
    <div id="main">
       <input type="file" name="images" id="images" multiple />
           <button type="submit" id="btn">Upload Files!</button>


   <div id="response"></div>
       <ul id="image-list">

       </ul>
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="upload.js"></script>
</body>
</html>

pastikan anda terhubung pada internet, karena pada contoh diatas kode
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> mengambil source dari link terkait.

lalu ini file php untuk proses pemindahan file ke server

upload.php
<?php

foreach ($_FILES["images"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $name = $_FILES["images"]["name"][$key];
        move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
    }
}

echo "<h2>Successfully Uploaded Images</h2>";

lalu ini file js. untuk membuat thumbnailnya

upload.js

(function () {
    var input = document.getElementById("images"),
        formdata = false;

    function showUploadedItem (source) {
        var list = document.getElementById("image-list"),
            li   = document.createElement("li"),
            img = document.createElement("img");
        img.src = source;
        li.appendChild(img);
        list.appendChild(li);
    }

    if (window.FormData) {
        formdata = new FormData();
        document.getElementById("btn").style.display = "none";
    }

     input.addEventListener("change", function (evt) {
         document.getElementById("response").innerHTML = "Uploading . . ."
         var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }
            }
        }

        if (formdata) {
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    document.getElementById("response").innerHTML = res;
                }
            });
        }
    }, false);
}());

tampilan dibawah ini merupakan hasil dari kode diatas

Sunday, January 12, 2014

Multi Select jQuery UI dan Membaca Inputannya

Thursday, January 9, 2014

Upload File Ala Facebook

My Bio

Translate