پیش نمایش تصویر قبل ازآپلود آن با استفاده از 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>

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