Image Preivew using AjaxToolKit AsyncFileUpload

StackOverflow https://stackoverflow.com/questions/21544594

質問

I want to upload image on server side folder using ajaxtoolkit ascyfileuploader but I want to preview that image and want to change name of that image before uploading it on server side. here is the code..

<ajax:ToolkitScriptManager ID="scriptManager1"  runat="server"/>
<div>
    <ajax:AsyncFileUpload ID="fileUpload1" OnClientUploadError="uploadError" 
    CompleteBackColor="White" Width="350px"  runat="server" UploaderStyle="Modern" 
    OnClientUploadComplete="uploadComplete" UploadingBackColor="#CCFFFF"  
    ThrobberID="imgLoad"  önUploadedComplete="fileUploadComplete" /><br />
    <asp:Image ID="imgLoad" runat="server" ImageUrl="loading.gif" />
    <asp:HiddenField ID="btnhidden" runat="server" />
    <br />


    <asp:Image ID="imgLoader" runat="server" ImageUrl="~/images/loader.gif" /><br /><br />
    <img id = "imgDisplay" alt="" src=""  style="display:none;"/>

</div>
<script type="text/javascript">
    function uploadComplete(sender, args) {

        var imgDisplay = $get("imgDisplay");
        imgDisplay.src = "images/loader.gif";
        imgDisplay.style.cssText = "";
        var img = new Image();
        img.onload = function () {
            imgDisplay.style.cssText = "height:100px;width:100px";
            imgDisplay.src = img.src;
        };

        <big></big>var myHidden = document.getElementById('<%= btnhidden.ClientID %>');
         var a = myHidden.value;

         img.src = "<%=ResolveUrl(UploadFolderPath) %>" + a;
    }
</script>

.CS File

protected void Page_Load(object sender, EventArgs e)
{

}
protected string UploadFolderPath = "~/Files/";
protected static int a = 0;
protected void fileUploadComplete(object sender, AsyncFileUploadEventArgs e)
{
        Thread.Sleep(1000);
        string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
        string extension = Path.GetExtension(filename);
        string s = "abc" + a + "" + extension;

        btnhidden.Value = s;
        fileUpload1.SaveAs(Server.MapPath(this.UploadFolderPath) + s);
        a++;
}

I am trying to set value to hidden filed on server side fileuploadcompleted event and access it on client side on completed event.. but on client side hidden filed value return null.. so please suggest me how can perform this whole operation. thank you.

役に立ちましたか？

解決

Please try with the below code snippet.

ASPX

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Script/jquery-1.10.2.min.js"></script>
    <script>
        function uploadControlUploadComplete(sender, e) {
            var imageID = sender.get_id().replace("afuUploadedImage", "imgUploadedImage");
            var fileName = e.get_fileName();
            $get(imageID).src = "TempFiles/" + fileName;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ajaxtoolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true"
                EnablePageMethods="true">
            </ajaxtoolkit:ToolkitScriptManager>

            <ajaxtoolkit:AsyncFileUpload ID="afuUploadedImage" runat="server" OnUploadedComplete="afuUploadedImage_UploadedComplete"
                OnClientUploadComplete="uploadControlUploadComplete" ThrobberID="lblThrobber" />
            <asp:Label ID="lblThrobber" runat="server" Style="display: none">
            <img src="image/indicator.gif"  alt="loading" /> 
            </asp:Label>
            <asp:Image ID="imgUploadedImage" runat="server" />
        </div>
    </form>
</body>
</html>

ASPX.CS

protected void afuUploadedImage_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
    if (afuUploadedImage.HasFile)
    {
        afuUploadedImage.SaveAs(Server.MapPath("~/TempFiles/") + afuUploadedImage.FileName);
    }
}

Please try with the above code snippet and let me know if any concern.

Update 1:

ASPX

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Script/jquery-1.10.2.min.js"></script>
    <script>
        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
        function uploadControlUploadComplete(sender, e) {
            var name = readCookie("tabs").replace("url=", "");
            var imageID = sender.get_id().replace("afuUploadedImage", "imgUploadedImage");
            var fileName = e.get_fileName();
            $get(imageID).src = "TempFiles/" + name;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ajaxtoolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true"
                EnablePageMethods="true">
            </ajaxtoolkit:ToolkitScriptManager>

            <ajaxtoolkit:AsyncFileUpload ID="afuUploadedImage" runat="server" OnUploadedComplete="afuUploadedImage_UploadedComplete"
                OnClientUploadComplete="uploadControlUploadComplete" ThrobberID="lblThrobber" />
            <asp:Label ID="lblThrobber" runat="server" Style="display: none">
            <img src="image/indicator.gif"  alt="loading" /> 
            </asp:Label>
            <asp:Image ID="imgUploadedImage" runat="server" />
        </div>
    </form>
</body>
</html>

ASPX.CS

protected void afuUploadedImage_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
    if (afuUploadedImage.HasFile)
    {
        string str = Guid.NewGuid() + "jayesh.jpg";
        afuUploadedImage.SaveAs(Server.MapPath("~/TempFiles/") + str);
        HttpCookie ActiveTabs = new HttpCookie("tabs");
        ActiveTabs.Values["url"] = str;
        Response.Cookies.Add(ActiveTabs);
    }
}

他のヒント

Your hidden field's value is null on client since AsyncFileUpload control uploading file in hidden frame. Try to add this line of code at the end of fileUploadComplete method:

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), 
    "SetUploadedFileName", String.Format("top.$get('{0}').value = '{1}'", 
    btnhidden.ClientID, s), true);

 <script type="text/javascript">
    function uploadComplete(sender, e) {
        debugger;
        var imageID = sender.get_id().replace("afuUploadedImage", "imgUploadedImage");
        var fileName = e.get_fileName();
        $('#img5').attr('src', "/HomeImages/" + fileName);
    }

</script>


    <div class="span12">
        <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" hrobberID="myThrobber"
            ContextKeys="fred"
            MaximumNumberOfFiles="10" OnUploadComplete="AjaxFileUpload1_UploadComplete" OnClientUploadComplete="uploadComplete" />
    </div>
    <div class="span6">
        <img src="" id="img5" />
    </div>
</div>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top