2016-08-04 102 views
0

我在互联网上搜索以使用更新面板中的上传文件。 我想避免页面刷新,当我点击文件上传。 所以我把我的代码在更新面板采用了触发 但还是爽快...更新面板中的文件上传仍在刷新

代码:

<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true"></asp:ScriptManager> 
       <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional" ChildrenAsTriggers="true"> 
        <Triggers> 
         <asp:PostBackTrigger ControlID="imageUploadAction" /> 
        </Triggers> 
        <ContentTemplate> 
         <div class="fileUpload btn btn-primary btn-block btn-lg"> 
          <span>آپلود</span> 
          <asp:FileUpload CssClass="inputfile" runat="server" ID="imageUpload" /> 
         </div> 
         <br /> 
         <div class="alert alert-info" runat="server" id="imageAlert"></div> 
         <div style="border-bottom: 1px solid #ddd;"></div> 
         <br /> 
         <asp:Button runat="server" ID="imageUploadAction" CssClass="btn btn-block btn-lg btn-success" Text="ارسال" OnClick="imageUploadAction_Click" /> 
        </ContentTemplate> 
       </asp:UpdatePanel> 

代码背后:

protected void imageUploadAction_Click(object sender, EventArgs e) 
{ 
    Debug.WriteLine("Uploading" + " " + imageUpload.HasFile); 
    Boolean fileOK = false; 
    String path = Server.MapPath("~/Assets/image/posts/"); 
    if (imageUpload.HasFile) 
    { 
     String fileExtension = System.IO.Path.GetExtension(imageUpload.FileName).ToLower(); 
     String[] allowedExtensions = { ".jpg", ".png" }; 
     for (int i = 0; i < allowedExtensions.Length; i++) 
      if (fileExtension == allowedExtensions[i]) 
       fileOK = true; 
    } 

    if (fileOK) 
    { 
     try 
     { 
      int last = getLastImage() + 1; 
      string link = path + last + ".jpg"; 
      imageUpload.PostedFile.SaveAs(link); 
      db.insertPhoto(link); 
      imageAlert.InnerText = "فایل آپلود شده است ، کد عکس : " + last; 
     } 
     catch (Exception ex) 
     { 
      ExceptionUtility.LogExceptionNotFailure(ex); 
      Debug.WriteLine(ex.ToString()); 
      imageAlert.InnerText = "فایل نمیتواند آپلود شود."; 
     } 
    } 
    else 
    { 
     imageAlert.InnerText = "فایل مجاز نیست"; 
    } 
} 

回答

0

你建立imageUploadAction按钮成为PostBackTrigger(因此不是异步),从而导致完全重新加载页面。

请注意,无法使用UpdatePanel使用常规上传器。如果你真的想要异步文件上传,你必须在客户端和服务器端都实现相当多的代码。

看看这里 https://github.com/flowjs/flow.js FlowJs在这里演示 http://flowjs.github.io/ng-flow/

希望帮助