Question

我想使用ajaxtoolkit ascyfileuploader在服务器端文件夹上传图像，但我想预览该图像，并希望在服务器端上传之前更改该图像的名称。这是代码..

<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文件

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++;
}

我正在尝试将值设置为服务器端fileuploadcompleted事件上的隐藏字段，并在已完成事件的客户端访问它。但在客户端隐藏的字段值返回null .. 所以请建议我如何执行整个操作。谢谢。

Answer 1

您的隐藏字段的值在客户端上为空，因为AsyncFileUpload控制在隐藏帧中上传文件。尝试在fileUploadComplete方法的末尾添加这行代码：

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

Answer 2

请尝试使用以下代码段。

<强> 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);
    }
}

请尝试使用上面的代码段，如有任何疑问，请与我们联系。

更新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);
    }
}

Answer 3

 <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>

使用AjaxToolKit AsyncFileUpload进行图像预览

3 个答案: