上传前的图像预览 [英] Image preview before uploading

查看：56 发布时间：2019/6/18 23:24:21 C# ASP.NET SQL-Server

本文介绍了上传前的图像预览的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

海，

我正在开发一个项目，其中用户可以在上载到数据库之前预览图像，并在上载到数据库之前删除图像.我已经为此编写了JavaScript代码.我的问题是，如果我在没有母版页的新页中编写相同的代码，则其工作状况很好，bt不在母版页内.我该怎么办?即使我尝试了以下链接，但我没有.请帮帮我.

Hai,

I am developing a project in which user can preview the image before uploading to the database and delete the same before uploading to the db. I have written javascript code for that. My problem is, if i write the same code in new page without master page its working fine,bt not within the master page. What i have to do? Even i tried the following link but i didnt got. please help me.

http://www.dotnetspider.com/resources/40858-Preview-Image-before-uploading-using.aspx


if i write the below code in side my master page its not working.
MY aspx page


<pre><%@ Page Language="C#" AutoEventWireup="true" CodeFile="image3.aspx.cs" Inherits="image3" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    
    <script type="text/javascript">
function uploadStarted() {
    $get("imgDisplay").style.display = "none";
}
function uploadComplete(sender, args) {
    var imgDisplay = $get("imgDisplay");
    imgDisplay.src = "images/loading.jpg";
    imgDisplay.style.cssText = "";
    var img = new Image();
    img.onload = function () {
        imgDisplay.style.cssText = "height:100px;width:100px";
        imgDisplay.src = img.src;
    };
    img.src = "<%=ResolveUrl(UploadFolderPath) %>" + args.get_fileName();
}
function clearcontents() {
    var AsyncFileUpload = $get("<%=AsyncFileUpload1.ClientID%>");
    var txts = AsyncFileUpload.getElementsByTagName("input");
    for (var i = 0; i < txts.length; i++) {
        if (txts[i].type == "text") {
            txts[i].value = "";
            txts[i].style.backgroundColor = "white";
        }
    }
    
}

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:AsyncFileUpload OnClientUploadComplete="uploadComplete" runat="server" ID="AsyncFileUpload1" ThrobberID="imgLoader" OnUploadedComplete="FileUploadComplete" OnClientUploadStarted="uploadStarted" />
<asp:Image ID="imgLoader" runat="server" ImageUrl="images/loading.jpg" /><br /><br />
<img id = "imgDisplay" alt="" src="" style = "display:none"/>
<br />
<br />
<asp:LinkButton ID="previewdel" runat="server" Text="Delete" onclick="previewdel_Click"/>
    </div>
    </form>
</body>
</html>

我的CS页面.

my cs page.

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class image3 : System.Web.UI.Page
{
    protected string UploadFolderPath = "~/Uploads/";
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void FileUploadComplete(object sender, EventArgs e)
    {
        string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
        AsyncFileUpload1.SaveAs(Server.MapPath(this.UploadFolderPath) + filename);
    }



    protected void previewdel_Click(object sender, EventArgs e)
    {
        clearcontents(sender as Control);
    }
    private void clearcontents(Control control)
    {
        for (var i = 0; i < Session.Keys.Count; i++)
        {
            if (Session.Keys[i].Contains(control.ClientID))
            {
                Session.Remove(Session.Keys[i]);
                break;
            }
        }
    }
  
}

推荐答案

get(" ).style.display = " ; } 函数 uploadComplete(sender，args){ var imgDisplay =

get("imgDisplay").style.display = "none"; } function uploadComplete(sender, args) { var imgDisplay =

get(" ); imgDisplay.src = " ; imgDisplay.style.cssText = " ; var img = 新 Image(); img.onload = 功能(){ imgDisplay.style.cssText = " ； imgDisplay.src = img.src; }; img.src = " + args.get_fileName( ); } 功能 clearcontents(){ var AsyncFileUpload =

get("imgDisplay"); imgDisplay.src = "images/loading.jpg"; imgDisplay.style.cssText = ""; var img = new Image(); img.onload = function () { imgDisplay.style.cssText = "height:100px;width:100px"; imgDisplay.src = img.src; }; img.src = "<%=ResolveUrl(UploadFolderPath) %>" + args.get_fileName(); } function clearcontents() { var AsyncFileUpload =

get(" ); var txts = AsyncFileUpload.getElementsByTagName(" span>); for ( var i = 0 ; i < txts.length; i ++){ 如果(txts [i] .type == " ){ txts [i] .value = " ; txts [i] .style.backgroundColor = " ; } } } < / 脚本 > < /head > < 正文 > < 表单 =" form1" runat >服务器" > < div > < asp:ScriptManager ID =" runat 服务器" < /asp:ScriptManager > < asp:AsyncFileUpload OnClientUploadComplete =" runat 服务器" ID AsyncFileUpload1" ThrobberID imgLoader" OnUploadedComplete =" span> =" uploadStarted" / > < asp:Image ID =" runat 服务器" ImageUrl images/loading.jpg" / > < br / > < br > < img imgDisplay" alt " src " 样式 =" / > < br > < br > < asp:LinkButton ID =" runat 服务器" 文本删除" onclick previewdel_Click" > < /div > < /form > < /body > < /html >

get("<%=AsyncFileUpload1.ClientID%>"); var txts = AsyncFileUpload.getElementsByTagName("input"); for (var i = 0; i < txts.length; i++) { if (txts[i].type == "text") { txts[i].value = ""; txts[i].style.backgroundColor = "white"; } } } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:AsyncFileUpload OnClientUploadComplete="uploadComplete" runat="server" ID="AsyncFileUpload1" ThrobberID="imgLoader" OnUploadedComplete="FileUploadComplete" OnClientUploadStarted="uploadStarted" /> <asp:Image ID="imgLoader" runat="server" ImageUrl="images/loading.jpg" /><br /><br /> <img id = "imgDisplay" alt="" src="" style = "display:none"/> <br /> <br /> <asp:LinkButton ID="previewdel" runat="server" Text="Delete" onclick="previewdel_Click"/> </div> </form> </body> </html>

我的CS页面.

my cs page.

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class image3 : System.Web.UI.Page
{
    protected string UploadFolderPath = "~/Uploads/";
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void FileUploadComplete(object sender, EventArgs e)
    {
        string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
        AsyncFileUpload1.SaveAs(Server.MapPath(this.UploadFolderPath) + filename);
    }



    protected void previewdel_Click(object sender, EventArgs e)
    {
        clearcontents(sender as Control);
    }
    private void clearcontents(Control control)
    {
        for (var i = 0; i < Session.Keys.Count; i++)
        {
            if (Session.Keys[i].Contains(control.ClientID))
            {
                Session.Remove(Session.Keys[i]);
                break;
            }
        }
    }
  
}

这篇关于上传前的图像预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

上传前的图像预览 [英] Image preview before uploading

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

上传前的图像预览 [英] Image preview before uploading

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

登录关闭