در این مقاله ما قصد داریم که با طرح یک مثال ساده نحوه استفاده از HTML5 FileReader API را برای خواندن فایل های Image و نمایش تصویر بدون اپلود در سرور با استفاده از JQuery را توضیح بدهیم.

قصد داریم که تصویر محلی بدون آپلود در سرور با استفاده از فیلتر DXImageTransform در ویژگی Css و HTML5 FileReader API نمایش بدهیم.

HTML Markup

HTML Markup کنترل HTML FileUpload و Div را شامل می شود که برای نمایش زنده مورد استفاده قرار خواهد گرفت.

<input id="fileupload" type="file" />
<hr />
<b>Live Preview</b>
<br />
<br />
<div id="dvPreview">
</div>

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

ما نیاز داریم که اول فایل عکس را مورد اعتبار سنجی قرار بدهیم که از صحت آن مطمئن بشویم.سپس نیاز داریم که مرورگر و نسخه آن را که بر اساس آن پایه گذاری شده است مشخص کنیم و ما نیاز به یک روش مناسب برای نمایش عکس قبل از آپلود داریم.

مورد 1:مرورگری که از Html5 پشتیبانی نمی کند که به عنوان مثال Internet Explorer 8 و 9

برای مرورگرهایی که  HTML5 و DXImageTransform filter CSS را پشتیبانی نمی کنند باید DXImageTransform filter را در DIV پیاده سازی کرد و آدرس پوشه را در کنترل FileUpload قرارداد.

مورد 2:مرورگرهایی که از HTML5 پشتیبانی می کنند به عنوان مثال Internet Explorer 10 و 11 ، FireFox ، Chrome و Opera.

برای این مرورگرها که از HTML5 و همچنین از HTML5 FileReader API پشتیبانی می کنند.فایل انتخاب شده در کنترل FileUpload به صورت BASE64 string با استفاده از متد 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>

دلیل امنیتی Explorer 8 و 9

Explorer 8 و 9 یک ویژگی امنیتی دارد که مانع از کار کردن با تصاویر زنده در برنامه ای که بر روی میزبانی سرور است ، می شود.

با توجه به این ویژگی امنیتی موجود در این مرورگرها آدرس این عکس ها را به C:\Images\Pouriya تغییر می دهیم.

Png در C:\FakePath\Mudassar.png.

و از این رو جاوا اسکریپت قادر به تعیین محل فایل است.

راه حل این مشکل این است که درخواست سایت را در دامنه های امن مرورگر Internet Explore بیافزایید.