Image Preivew using AjaxToolKit AsyncFileUpload

Я хочу загрузить изображение на серверной папке с помощью ajaxtoolkit ascyfileuploader, но я хочу просмотреть это изображение и хочу изменить имя этого изображения перед его загрузкой на сервер. здесь код ..Image Preivew using AjaxToolKit AsyncFileUpload

<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 .. , поэтому, пожалуйста, предложите мне, как выполнить всю эту операцию. спасибо.

источник

2014-02-04 Ganesh

Проблема в том, что на постбэка очищается значение, так что мой совет, это получить значение в сессии вместо того, чтобы получить его в скрытом поле, так что значение остается в сессии, и вы можете используйте его для дальнейшей операции. !! –

Первый сеанс возвращает значение null для загрузки 1-го изображения, для второго изображения загружает его 1-е значение, которое хранится в сессии. Значение значения обновлено на 2-м пост-обратно. – Ganesh

Пожалуйста, попробуйте ниже фрагмент кода.

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

источник

2014-02-04 10:35:14

Используя приведенный выше код, вы можете сохранить файл в папке TempFiles и показать это изображение на странице. –

Привет, Jayesh, приведенный выше код работал правильно, но я хочу изменить имя изображения, прежде чем загружать его на сервер. Пожалуйста, проверьте мой вышеперечисленный вопрос. Мой код работает правильно, но его изображение не отображается, потому что я изменил имя изображения перед загрузкой. – Ganesh

Я обновил свой код выше. Я добился того же самого с кокетством. –

Значение скрытого поля равно нулю на клиенте, так как AsyncFileUpload управляет загрузкой файла в скрытый кадр. Попробуйте добавить эту строку кода в конце fileUploadComplete метода:

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

источник

2014-02-04 07:20:58

Hi Yuriy, Я пытаюсь, но все же скрытое поле возвращает значение null. – Ganesh

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

источник

2014-07-09 17:00:30 Ankit

Image Preivew using AjaxToolKit AsyncFileUpload

ответ

Смежные вопросы