Translate

> | | > HTML FileBrowser Image Preview

HTML FileBrowser Image Preview

Posted on Wednesday, February 3, 2016 | No Comments


HTML



<div class="form-group">
                                <label class="control-label col-md-3" for="inputWarning"> Image 1 </label>
                                <div class="col-md-4">
                                    <input id="exampleInputFile1" name="ImagePath" type="file">
                                    <b>Live Preview</b>
                                    <br />
                                    <div id="dvPreview1">
                                    </div>
                                </div>
                            </div>



Java Script




  window.onload = function () {

        LoadTempData();

        var fileBrowser = document.getElementById("exampleInputFile1");
        fileBrowser.onchange = function () {
            LoadImage('1', fileBrowser);
        }


        var fileBrowser2 = document.getElementById("exampleInputFile2");
        fileBrowser2.onchange = function () {
            LoadImage('2', fileBrowser2);
        }


        var fileBrowser3 = document.getElementById("exampleInputFile3");
        fileBrowser3.onchange = function () {
            LoadImage('3', fileBrowser3);
        }

        var fileBrowser4 = document.getElementById("exampleInputFile4");
        fileBrowser4.onchange = function () {
            LoadImage('4', fileBrowser4);
        }


        var fileBrowser5 = document.getElementById("exampleInputFile5");
        fileBrowser5.onchange = function () {
            LoadImage('5', fileBrowser5);
        }

    };





function LoadImage(idNo, fileBrowser)
    {

        if (typeof (FileReader) != "undefined") {
            var dvPreview = document.getElementById("dvPreview" + idNo);
            dvPreview.innerHTML = "";
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            for (var i = 0; i < fileBrowser.files.length; i++) {
                var file = fileBrowser.files[i];
                if (regex.test(file.name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {

                        //var img = document.createElement("IMG");
                        //img.height = "100";
                        //img.width = "100";
                        //img.src = e.target.result;
                        //dvPreview.appendChild(img);

                        var image = new Image();
                        image.src = e.target.result;
                        image.onload = function () {
                            if(image.width != 680 || image.height!=850)
                            {
                                alert('Image size not valid');

                                //debugger;
                                //fileBrowser.outerHTML = fileBrowser.outerHTML;
                                //$('#' + id).html($('#' + id).html());
                                fileBrowser.value = "";

                            } else {
                                image.height = "100";
                                image.width = "150";
                                //img.src = e.target.result;
                                dvPreview.appendChild(image);
                            }
                        };

                    }
                    reader.readAsDataURL(file);
                } else {
                    alert(file.name + " is not a valid image file.");
                    dvPreview.innerHTML = "";
                    return false;
                }
            }
        } else {
            alert("This browser does not support HTML10 FileReader.");
        }
    }


Leave a Reply

Powered by Blogger.