Question

我想将图像上传到Web服务器文件并获取路径并将其保存到数据库中。

HTML和Javascript

<img id="imgDisplay" alt="" src="" style="display: none" class="img-thumbnail" />
            <ajaxToolkit:AsyncFileUpload OnClientUploadComplete="uploadComplete" runat="server"
                ID="AsyncFileUpload1" UploaderStyle="Traditional" CompleteBackColor="White" UploadingBackColor="#CCFFFF"
                ThrobberID="imgLoader" OnUploadedComplete="FileUploadComplete" OnClientUploadStarted="uploadStarted" />
                <asp:Image ID="imgLoader" runat="server" ImageUrl="~/Images/loader2.gif" 
                Height="21px" Width="23px" />

    <script type="text/javascript">
        function uploadStarted() {
            $get("imgDisplay").style.display = "none";
        }
        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:240px;width:240px";

                imgDisplay.src = img.src;
            };
            img.src = "<%=ResolveUrl(UploadFolderPath) %>" + args.get_fileName();

        }
</script>

C＃代码落后，事件文件上传完成

protected string UploadFolderPath = "~/Images/";

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

使用上面的代码，我成功地做到了......但是当我想用GUID重命名文件时，问题就变成了，上传后图像就不会出现了。

背后的C＃代码

protected string UploadFolderPath = "~/Images/";
protected void FileUploadComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
    string fileext = System.IO.Path.GetExtension(AsyncFileUpload1.FileName);
    string file_id = Guid.NewGuid().ToString();
    AsyncFileUpload1.SaveAs(Server.MapPath(this.UploadFolderPath) + file_id + fileext);      
}

我在javascript中意识到，它将从文件上传控件中引用agrs。这意味着它无法引用新文件名。

的Javascript

img.src = "<%=ResolveUrl(UploadFolderPath) %>" + args.get_fileName();

所以我谷歌找到如何将代码后面的值粘贴到javascript。我发现了它。然后修改我的背后代码像这样

protected string UploadFolderPath = "~/Images/";

protected string image = "";

protected void FileUploadComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
      string fileext = System.IO.Path.GetExtension(AsyncFileUpload1.FileName);

      string file_id = Guid.NewGuid().ToString();

      AsyncFileUpload1.SaveAs(Server.MapPath(this.UploadFolderPath) + file_id + fileext);

      image = this.ResolveUrl(this.UploadFolderPath) + file_id + filename;
}

和javascript

<script type="text/javascript">
function uploadStarted() {
            $get("imgDisplay").style.display = "none";
        }
        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:240px;width:240px";

                imgDisplay.src = img.src;
            };

            img.src = "<%=ResolveUrl(image) %>";

        }
</script>

仍未显示，因为图像变量内部没有值。怎么解决这个问题？

抱歉我的英文不好

Answer 1

您的代码没有任何问题，我看到的唯一问题是，由于您编辑了路径，因此如果您检索它，则必须将其恢复为原始值，除非没有图像显示。

Answer 2

fileupload的

的aspx代码

<ajax:asyncfileupload id="Asyncfileupload1" onclientuploadcomplete="uploadComplete1"
width="350px" runat="server" uploaderstyle="Traditional" 
throbberid="Image6" onuploadedcomplete="Asyncfileupload1_UploadedComplete" />

javascript函数

function uploadComplete1() 
{
    window.location = window.location.href;
}

aspx.cs代码

protected void Asyncfileupload1_UploadedComplete(object sender, AsyncFileUploadEventArgs e)
{
    string name = Asyncfileupload1.FileName;
    string[] spi = name.Split('.');
    int len = spi.Length;
    string type = spi[len - 1];
    if (type == "apk" || type == "ipa")
    {
        if (Asyncfileupload1.PostedFile.ContentLength > 10)
        {
            string filename = System.IO.Path.GetFileName(Asyncfileupload1.FileName);
            string ext = Path.GetExtension(filename);
            string newfilename = Path.GetRandomFileName();
            newfilename += ext;
            Asyncfileupload1.SaveAs(Server.MapPath("~/product_application/") + newfilename);
            MobileStoreEntities mse = new MobileStoreEntities();
            ProductMast um = new ProductMast();
            int loginid = Utility.login_id();

            um = mse.ProductMasts.Where(i => i.ProductID == proid).FirstOrDefault();
            um.ApplicationFile = "~/product_application/" + newfilename;
            int check1 = mse.SaveChanges();
            lblDoc.Text = "Old file is available. Want to change? Then Upload";
        }
        else
        {
            ScriptManager.RegisterStartupScript(this, GetType(), "TestAlert", "alert('" + "Size problem." + "');", true);
        }
        //Response.Redirect("ProductFileUpload.aspx?proid="+HttpUtility.UrlEncode(enc));
        //Response.Redirect("ProductFileUpload.aspx");
    }
    else
    {
        ScriptManager.RegisterStartupScript(this, GetType(), "TestAlert", "alert('" + "Must upload doc, docx or pdf file." + "');", true);
    }
}

使用Ajax asyncfileupload上传，重命名和显示图像 - ASP.NET

2 个答案:

fileupload的

javascript函数

aspx.cs代码