Asyncfileupload文件preVIEW不显示 [英] Asyncfileupload file preview doesn't show

问题描述

我有在更新面板一个Ajax的异步文件上传控件。我的上传工作正常，但后上载完成，我需要看到我已上载的图像。 但它不工作，这里是我做了什么

 函数UploadComplete（发件人，参数）{
        变种文件名= args.get_fileName（）;
        VAR的contentType = args.get_contentType（）;
        如果（contentType.indexOf（图像）== -1）{
            的document.getElementById（'＆LT;％= lblStatus.ClientID％＆GT;'）的innerText =上传的文件必须是一个图片！+＆LT;跨度风格=颜色：红色;＆gt;中+ args.get_errorMessage（）+＆所述; /跨度＆gt;中;
            的document.getElementById（'＆LT;％= AsyncFileUpload1.ClientID％＆GT;'）text.style.backgroundColor =红。
        }
        其他 {
            VAR文本=+文件名+|+ args.get_length（）+字节+上传成功与;
            的document.getElementById（'＆LT;％= lblStatus.ClientID％＆GT;'）。innerText属性=文本;
              $得到（imageView1）SRC =./~/+文件名。
        }
    }
 

天冬氨酸code：

 ＆LT; ajaxToolkit：AsyncFileUpload ID =AsyncFileUpload1WIDTH =400像素=服务器
        OnClientUploadError =uploadError时
        OnClientUploadStarted =StartUpload
        OnClientUploadComplete =UploadComplete
        CompleteBackColor =石灰UploaderStyle =现代
        ErrorBackColor =红的ClientIDMode =自动识别
        ThrobberID =活动指示器
        UploadingBackColor =＃66CCFF
            onuploadedcomplete =AsyncFileUpload1_UploadedComplete/＆GT;

 ＆LT; ASP：标签ID =活动指示器=服务器风格=显示：无＆GT;
 ＆LT; ASP：图像=服务器ID =IMG preVIEW的ImageUrl =〜/图片/ uploading.gif/＆GT;
        ＆LT; / ASP：标签＆gt;
        ＆LT; IMG =服务器ID =imageView1/＆GT;
 ＆LT; ASP：标签ID =lblStatus=服务器风格=字体家庭：宋体;字体大小：小;＆GT;＆LT; / ASP：标签＆gt;
 

解决方案

您可以使用 OnUploadedComplete 事件来显示图像

 ＆LT; ajaxToolkit：AsyncFileUpload ID =AsyncFileUpload1WIDTH =400像素=服务器OnUploadedComplete =ProcessUpload

保护无效ProcessUpload（对象发件人，AjaxControlToolkit.AsyncFileUploadEventArgs E）
{
字符串文件名=使用Server.Mappath（./）+image.jpg的;
AsyncFileUpload1.SaveAs（文件名）;

ScriptManager.RegisterClientScriptBlock（AsyncFileUpload1，AsyncFileUpload1.GetType（），IMG，
    top.document.getElementById（'imgUpload'）的src =image.jpg的';，
    真正）;
}
 

有关详细信息如何preVIEW来看看这个例子<一个href="http://www.mikeborozdin.com/post/AJAX-File-Upload-in-ASPNET-with-the-AsyncFileUpload-Control.aspx"相对=nofollow> AJAX文件上传的ASP.NET与AsyncFileUpload控制

I am having an Ajax Asynchronous file upload control in update panel. My upload works fine but after the upload is completed., I need to see the image I have uploaded. But it doesnt work here is what I have done

function UploadComplete(sender, args) {
        var filename = args.get_fileName();
        var contentType = args.get_contentType();
        if (contentType.indexOf('image') == -1) {
            document.getElementById('<%=lblStatus.ClientID%>').innerText = "Uploaded file must be an Image!"+ "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
            document.getElementById('<%=AsyncFileUpload1.ClientID%>').text.style.backgroundColor = "Red";
        }
        else {
            var text = "" + filename + "      |      " + args.get_length() + " bytes"+"Uploaded Succesfully";
            document.getElementById('<%=lblStatus.ClientID%>').innerText = text;
              $get("imageView1").src = "./~/" + filename;
        }
    }

AspCode:

<ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server"    
        OnClientUploadError="uploadError"    
        OnClientUploadStarted="StartUpload"  
        OnClientUploadComplete="UploadComplete"  
        CompleteBackColor="Lime" UploaderStyle="Modern"    
        ErrorBackColor="Red" ClientIDMode="AutoID"    
        ThrobberID="Throbber"    
        UploadingBackColor="#66CCFF" 
            onuploadedcomplete="AsyncFileUpload1_UploadedComplete" /> 

 <asp:Label ID="Throbber" runat="server" Style="display: none">
 <asp:Image runat="server" ID="imgPreview" ImageUrl="~/Images/uploading.gif" />
        </asp:Label>
        <img runat="server" id="imageView1"/>
 <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>

解决方案

You can use OnUploadedComplete event to display the image

<ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnUploadedComplete="ProcessUpload"

protected void ProcessUpload(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
string fileName = Server.MapPath("./") + "image.jpg";
AsyncFileUpload1.SaveAs(fileName);

ScriptManager.RegisterClientScriptBlock(AsyncFileUpload1, AsyncFileUpload1.GetType(), "img",
    "top.document.getElementById('imgUpload').src='image.jpg';", 
    true);
}

For Details how to preview take a look at this example AJAX File Upload in ASP.NET with the AsyncFileUpload Control

这篇关于Asyncfileupload文件preVIEW不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！