Skip to content

S
Smart Watering System Information
Switch branch/tag
Find file
Normal viewHistoryPermalink
ajaxImageUpload.blade.php 1.99 KB
Newer Older
ini sudah ku upload
675b21ab
 
Soni Pratama Silalahi committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 5 - Ajax Image Uploading Tutorial</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>

<div class="container">
    <h1>Laravel 5 - Ajax Image Uploading Tutorial</h1>

    <form action="{{ route('ajaxImageUpload') }}" enctype="multipart/form-data" method="POST">

        <div class="alert alert-danger print-error-msg" style="display:none">
            <ul></ul>
        </div>

        <input type="hidden" name="_token" value="{{ csrf_token() }}">

        <div class="form-group">
            <label>Alt Title:</label>
            <input type="text" name="title" class="form-control" placeholder="Add Title">
        </div>

        <div class="form-group">
            <label>Image:</label>
            <input type="file" name="image" class="form-control">
        </div>

        <div class="form-group">
            <button class="btn btn-success upload-image" type="submit">Upload Image</button>
        </div>

    </form>

</div>

<script type="text/javascript">
    $("body").on("click",".upload-image",function(e){
        $(this).parents("form").ajaxForm(options);
    });

    var options = {
        complete: function(response)
        {
            if($.isEmptyObject(response.responseJSON.error)){
                $("input[name='title']").val('');
                alert('Image Upload Successfully.');
            }else{
                printErrorMsg(response.responseJSON.error);
            }
        }
    };

    function printErrorMsg (msg) {
        $(".print-error-msg").find("ul").html('');
        $(".print-error-msg").css('display','block');
        $.each( msg, function( key, value ) {
            $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
        });
    }
</script>

</body>
</html>