图像预览不适用于云窗口Azure（MVC + JQuery） [英] Image preview is not working on cloud window Azure (MVC+JQuery)

问题描述

目前我正在开发云窗口Azure项目，我的问题是图像预览无法在云端窗口Azure上工作，但它正在开发我的本地开发机器。一旦它部署在云上，然后图像预览及其验证无效。





这是我的代码 -

注 - （此代码在IE-9本地工作正常）

HTML5代码 -

< td> 
< span class =inpFileWrap> 
< input type =fileid =customerPicname =customerPictabindex =51class =inputFile$ b $bönchange=PreviewCustomerImg（this）/>< /跨度> 
< label id =labelclass =note> 
在您的计算机上选择一个图像文件（最大100kb）：< / label> 
< label id =imageErrorclass =error marginTm25 dispNone> 
< / label> 
 @if（Session [customerpic]！= null）
 {
 byte [] temp23 = Session [customerpic] as byte []; 
< span class =imgExistPrev> 
< img style =border：2,0，＃FFFFFF; padding：50width =60height =80src =data：image / jpg; base64，@（Convert.ToBase64String（ temp23））alt =/> 
< / span> 
 
} 
< div id =customerPicPreview> 
< / div> 
< / td> 
 
< style type =text / css> 
 #customerPicPreview 
 {
 filter：progid：DXImageTransform.Microsoft.AlphaImageLoader（sizingMethod = scale）; 
} 
< / style> 
 
 
 
 JQuery函数 -  
 
函数PreviewCustomerImg（imgFile）{
 $ .ajax（{
 type：'' POST''，
 cache：false，
 url：''/ AddCustomer / VerifyImageSize？CustomerImage =''+ imgFile.value，
 success：function（data）{
 var value = data; 
 if（value == 1）{
 // TODO：Shanker需要处理这个
 $（''＃imageError''）。show（）。html （只能上传.jpg，.jpeg，.png文件。）。removeClass（dispNone）; 
 $（＃customerPicPreview）。hide（）; 
返回false; 
 
} 
 if（value == 2）{
 // TODO：Shanker需要照顾这个
 $（''＃imageError''）。 （）。html（文件大小不应超过100KB）。removeClass（dispNone）;; 
 $（ ＃customerPicPreview）隐藏（）。 
返回false; 
} 
 else {
 $（''＃imageError''）。html（）。hide（）; 
 $（＃customerPicPreview）。show（）; 
 var newPreview = document.getElementById（customerPicPreview）; 
 newPreview.filters.item（DXImageTransform.Microsoft.AlphaImageLoader）。src = imgFile.value; 
 newPreview.style.width =100px; 
 newPreview.style.height =100px; 
} 
} 
 
}）; 
 
} 
 
 
我的控制器代码是 -  
 
 [HandleError（ExceptionType = typeof（Exception），View =ApplicationError） ] 
 public JsonResult VerifyImageSize（string CustomerImage）
 {
 HttpPostedFileBase photo = Request.Files [customerPic]; 
 
 string filenameWithPath = CustomerImage; 
 string filename = System.IO.Path.GetFileName（filenameWithPath）; 
 string e = Path.GetExtension（CustomerImage）; 
 if（e == null）
 {
返回新的JsonResult {Data = 1}; 
} 
 
 string path = Server.MapPath（〜/ App_Data）; 
 byte [] imgData = System.IO.File.ReadAllBytes（CustomerImage）; 
 //检查文件扩展名为
 if（e ==。jpeg|| e ==.jpg|| e ==。png）
 {
 if（imgData.Length> 102400）
 {
返回新的JsonResult {Data = 2}; 
} 
其他
 {
返回新的JsonResult {Data = 3}; 
} 
} 
其他
 {
返回新的JsonResult {Data = 1}; 
} 
} 

谢谢

Sandeep

解决方案

< blockquote> .ajax（{
type：''POST''，
cache：false，
url：''/ AddCustomer / VerifyImageSize？CustomerImage =''+ imgFile.value，
成功：函数（数据）{
var value = data;
if（value == 1）{
// TODO：Shanker需要处理这个

（''＃imageError''）。show（）。html（只有.jpg，。jpeg，.png文件可以上传。）。removeClass（dispNone）;

（＃customerPicPreview）。hide（）;
返回false;

}
if（value == 2）{
// TODO：Shanker需要处理这个

Hi,

Currently i am working on cloud window Azure project, my issue is Image preview is not working on cloud window Azure but it''s working on my local development machine. Once it deployed on cloud then image preview and its validation is not working.


Here is the my code -
NOTE - (This code is working fine local IE-9)
HTML5 Code-

  <td>
                            <span class="inpFileWrap">
                                <input type="file" id="customerPic" name="customerPic" tabindex="51" class="inputFile"
                                     önchange="PreviewCustomerImg(this)" /></span>
                            <label id="label" class="note">
                                Select an image file on your computer(100kb max):</label>
                            <label id="imageError" class="error marginTm25 dispNone">
                            </label>
                            @if (Session["customerpic"] != null)
                            {
                                byte[] temp23 = Session["customerpic"] as byte[]; 
                                 <span class="imgExistPrev">
                                    <img style="border:2 ,0,#FFFFFF;padding:50" width="60" height="80" src="data:image/jpg;base64,@(Convert.ToBase64String(temp23))" alt="" />
                                </span>  

                            }
                            <div id="customerPicPreview">
                            </div>
                        </td>

<style type="text/css">
    #customerPicPreview
    {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    }
</style>



JQuery function - 

function PreviewCustomerImg(imgFile) {
        $.ajax({
            type: ''POST'',
            cache: false,
            url: ''/AddCustomer/VerifyImageSize?CustomerImage='' + imgFile.value,
            success: function (data) {
                var value = data;
                if (value == 1) {
                    //TODO: Shanker needs to take care of this
                    $(''#imageError'').show().html("Only .jpg , .jpeg, .png files can be uploaded.").removeClass("dispNone");
                    $("#customerPicPreview").hide();
                    return false;

                }
                if (value == 2) {
                    //TODO: Shanker needs to take care of this
                    $(''#imageError'').show().html("File size should not exceed more than 100KB").removeClass("dispNone"); ;
                    $("#customerPicPreview").hide();
                    return false;
                }
                else {
                    $(''#imageError'').html("").hide();
                    $("#customerPicPreview").show();
                    var newPreview = document.getElementById("customerPicPreview");
                    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
                    newPreview.style.width = "100px";
                    newPreview.style.height = "100px";
                }
            }

        });

    }


My Controller Code is  - 

 [HandleError(ExceptionType = typeof(Exception), View = "ApplicationError")]
        public JsonResult VerifyImageSize(string CustomerImage)
        {
            HttpPostedFileBase photo = Request.Files["customerPic"];

            string filenameWithPath = CustomerImage;
            string filename = System.IO.Path.GetFileName(filenameWithPath);
            string e = Path.GetExtension(CustomerImage);
            if (e == null)
            {
                return new JsonResult { Data = 1 };
            }

            string path = Server.MapPath("~/App_Data");
            byte[] imgData = System.IO.File.ReadAllBytes(CustomerImage);
            //Check file extention here
            if (e == ".jpeg" || e == ".jpg" || e == ".png")
            {
                if (imgData.Length > 102400)
                {
                    return new JsonResult { Data = 2 };
                }
                else
                {
                    return new JsonResult { Data = 3 };
                }
            }
            else
            {
                return new JsonResult { Data = 1 };
            }
        }

Thanks
Sandeep

解决方案

.ajax({ type: ''POST'', cache: false, url: ''/AddCustomer/VerifyImageSize?CustomerImage='' + imgFile.value, success: function (data) { var value = data; if (value == 1) { //TODO: Shanker needs to take care of this

(''#imageError'').show().html("Only .jpg , .jpeg, .png files can be uploaded.").removeClass("dispNone");

("#customerPicPreview").hide(); return false; } if (value == 2) { //TODO: Shanker needs to take care of this

这篇关于图像预览不适用于云窗口Azure（MVC + JQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！