پیش نمایش تصویر قبل ازآپلود آن با استفاده از jquery

پیش نمایش تصویر قبل ازآپلود آن با استفاده از jquery

پیش نمایش تصویر قبل ازآپلود آن با استفاده از  jquery

آکادمی برنامه نویسان ، برگزار کننده دوره های آموزش برنامه نویسی با استفاده از اساتید مجرب و حرفه ای در سراسر ایران .

[ جهت مشاهده دوره های درحال ثبت نام کلیک کنید ]

ارائه مدارک معتبر آموزشی و ورود به بازار کار .

دراین مقاله من چگونگی نشان دادن پیش نمایش تصویر قبل از آپلود آن با استفاده از Jquery را توضیح خواهم داد.

 

پیاده سازی سمت سرور گیرنده برای نمایش پیش نمایش زنده تصویر قبل از آپلود

 باید چک کنیم که فایل ما یک فایل تصویری قابل قبول باشد.

فایل انتخاب شده  از کنترل فایل آپلود به عنوان یک رشته Base64 با استفاده از متد readAsDataURL خوانده میشود و با استفاده از کنترل Image نمایش داده می شود.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
    $("#fileupload").change(function () {
        $("#dvPreview").html("");
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
        if (regex.test($(this).val().toLowerCase())) {
            if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                $("#dvPreview").show();
                $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
            }
            else {
                if (typeof (FileReader) != "undefined") {
                    $("#dvPreview").show();
                    $("#dvPreview").append("<img />");
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#dvPreview img").attr("src", e.target.result);
                    }
                    reader.readAsDataURL($(this)[0].files[0]);
                } else {
                    alert("This browser does not support FileReader.");
                }
            }
        } else {
            alert("Please upload a valid image file.");
        }
    });
});
</script>

 

فایل Css


<style type="text/css">
#dvPreview
{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
    min-height: 400px;
    min-width: 400px;
    display: none;
}
</style>

فایل های ضمیمه