Translate

Home > February 2016

February 2016

HTML FileBrowser Image Preview

Wednesday, February 3, 2016 Category : , , 0


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.");
        }
    }


ASP.NET MVC Jquery Image and Text Save

Category : , 0




  $("#btnAdd").click(function (e) {
        e.preventDefault();
        //$("#form1").submit();
        var file1;
        if (document.getElementById("exampleInputFile1").files.length > 0)
            file1 = document.getElementById("exampleInputFile1").files[0];

        var file2;
        if (document.getElementById("exampleInputFile2").files.length > 0)
            file2 = document.getElementById("exampleInputFile2").files[0];


        var file3;
        if (document.getElementById("exampleInputFile3").files.length > 0)
            file3 = document.getElementById("exampleInputFile3").files[0];

        var file4;
        if (document.getElementById("exampleInputFile4").files.length > 0)
            file4 = document.getElementById("exampleInputFile4").files[0];

        var file5;
        if (document.getElementById("exampleInputFile5").files.length > 0)
            file5 = document.getElementById("exampleInputFile5").files[0];
      

        var formData = new FormData();
        formData.append("MainGroupId", $("#MainGroup").val());
        formData.append("MainGroupName", $("#MainGroup option:selected").text());

        formData.append("SubGroupId", $("#SubGroup").val());
        formData.append("SubGroupName", $("#SubGroup option:selected").text());

        formData.append("NewBrandId", $("#NewBrandId").val());
        formData.append("NewBrandName", $("#NewBrandId option:selected").text());

        formData.append("NewCategoryId", $("#NewCategoryId").val());
        formData.append("NewCategoryName", $("#NewCategoryId option:selected").text());

        formData.append("NewColorId", $("#NewColorId").val());
        formData.append("NewColorName", $("#NewColorId option:selected").text());

        formData.append("IsActive", $("#IsActive").val());
        formData.append("Description", $("#Description").val());

        formData.append("Image1", file1);
        formData.append("Image2", file2);
        formData.append("Image3", file3);
        formData.append("Image4", file4);
        formData.append("Image5", file5);

        formData.append("OperationType", $("#hdnType").val());

        $.ajax({
            type: "POST",
            url: _urlBase + '/ProductManage/AddTempProduct',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (data) {

                if (data.ResultState == true) {
                    // done
                }
                else if (data.ResultState == false)
                    ShowMessage(data.SqlError);

            },
            error: function (error) {
                alert("errror");
            }
        });

    });





Backend C# code


[HttpPost]
        public JsonResult AddTempProduct()
        {
            Result r = new Result();
            try
            {
                ArticlePOCO article = new ArticlePOCO();


                article.MainGroupId = Request.Form["MainGroupId"];
               

                string OperationType = Request.Form["OperationType"];

                
    if (Request.Files.Count > 0)
                    {
                        if (Request.Files["Image1"] != null)
                        {
                            article.Image1 = Request.Files["Image1"];
                        }
                        if (Request.Files["Image2"] != null)
                        {
                            article.Image2 = Request.Files["Image2"];
                        }
                        if (Request.Files["Image3"] != null)
                        {
                            article.Image3 = Request.Files["Image3"];
                        }
                        if (Request.Files["Image4"] != null)
                        {
                            article.Image4 = Request.Files["Image4"];
                        }
                        if (Request.Files["Image5"] != null)
                        {
                            article.Image5 = Request.Files["Image5"];
                        }
                    }
     
                

                
            }
            catch (Exception ex)
            {
                r.ResultState = false;
                r.SqlError = ex.Message;
            }

            System.Web.Mvc.JsonResult jsonRe = new System.Web.Mvc.JsonResult()
            {
                Data = r,
                JsonRequestBehavior = System.Web.Mvc.JsonRequestBehavior.DenyGet
            };

            return jsonRe;

        }

ASP.NET Ajax Control Calenter Extender CSS

Monday, February 1, 2016 Category : 0

Some time outer table class poperty change the calender style , then we can fix it by applying this css.





.ajax__calendar table
{
margin:0px !important;
width:auto !important;
padding-left:0px !important;

}

.ajax__calendar table td
{
padding-left:2px !important;
padding-right:2px !important;
width:auto !important;
}
.ajax__calendar table th
{
padding-left:0px !important;
width:auto !important;
}
.ajax__calendar_container table
{
margin:0px !important;
padding:0px !important;
}

Powered by Blogger.