[英]Cannot get filename from AjaxFileUpload using javascript and asp.net
I've tried solving this out and researching for weeks and i still can't get it to work. 我已经尝试解决此问题并进行了数周的研究,但仍然无法正常工作。 My code is to simply upload images and then save it in the database without postback.
我的代码是简单地上传图像,然后将其保存在数据库中而无需回发。
As of now, I used AjaxFileUpload to upload images. 到目前为止,我使用AjaxFileUpload上传图像。 My plan was to get the uploaded filename in AjaxFileUpload using javascript and then store it in a hiddenfield.
我的计划是使用javascript在AjaxFileUpload中获取上载的文件名,然后将其存储在hiddenfield中。 And then when the admin clicks submit, it will get the value that was stored in the hiddenfield and then save it in the database(using the query that i have created in my code-behind).
然后,当管理员单击“提交”时,它将获取存储在hiddenfield中的值,然后将其保存在数据库中(使用我在我的后台代码中创建的查询)。
The problem is, it will always return empty. 问题是,它将始终返回空。 I hope you guys can really help me on this one.
我希望你们真的可以帮我这个忙。
Here is the code for the aspx: 这是aspx的代码:
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="CreateBrands.aspx.cs" Inherits="Pages_CreateBrands" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="asp"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Music Store</title>
<script src="../Javascript/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="~/Styles/jquery.bxslider.css"/>
<link rel="shortcut icon" type="image/png" href="~/Images/rockSign.png"/>
<script type="text/javascript">
function abc() {
var elem1 = document.getElementById('<%# itemFileUpload1.ID %>').value;
document.getElementById('HiddenInput1') = elem1;
var elem2 = document.getElementById('<%# itemFileUpload2.ID %>').value;
document.getElementById('HiddenInput2') = elem2;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="wrapper">
<h1>Item Image1:</h2>
<br />
<asp:AjaxFileUpload ID="itemFileUpload1" runat="server"
Width="300px" OnUploadComplete="itemUploadImage1"
OnClientUploadComplete="abc"/>
<input type="hidden" id="HiddenInput1" name="HiddenInput" value="" />
<h1>Item Image2:</h2>
<br />
<asp:AjaxFileUpload ID="itemFileUpload2" runat="server"
Width="300px" OnUploadComplete="itemUploadImage2"
OnClientUploadComplete="abc"/>
<input type="hidden" id="HiddenInput2" name="HiddenInput" value="" />
<br/>
<asp:Label ID="lblResult2" runat="server" Text=""></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" CssClass="submitButton"
Text="Save Item" OnClick="Button1_Click"/>
</div>
</form>
</body>
</html>
And here is the code for the aspx.cs: 这是aspx.cs的代码:
protected void itemUploadImage1(object sender, AjaxFileUploadEventArgs e)
{
string filename = Path.GetFileName(e.FileName);
itemFileUpload1.SaveAs(Server.MapPath("~/Images/Brands/String Instrument Items/Guitar/") + filename);
}
protected void itemUploadImage2(object sender, AjaxFileUploadEventArgs e)
{
string filename = Path.GetFileName(e.FileName);
itemFileUpload2.SaveAs(Server.MapPath("~/Images/Brands/String Instrument Items/Guitar/") + filename);
}
protected void Button1_Click(object sender, EventArgs e)
{
try {
string item_image1 = Request.Form["HiddenInput1"];
string item_image2 = Request.Form["HiddenInput2"];
ConnectionClassGuitarItems.AddStringInstrumentItems(item_image1,item_image2);
lblResult2.Text = "Upload successful!" + item_image1 + " and " + item_image2;
ClearTextFields2();
}
catch (Exception ex)
{
lblResult2.Text = ex.Message;
}
}
Notice the the Button1_Click, I try to access the value of HiddenInput1 and HiddenInput2 but it seems like they are empty. 注意Button1_Click,我尝试访问HiddenInput1和HiddenInput2的值,但似乎它们是空的。
Why not use a regular asp:FileUpload control and wrap part of your form/code block in an updatepanel to achieve the same desired action as using a AjaxFileUpload control: 为什么不使用常规的asp:FileUpload控件并将表单/代码块的一部分包装在updatepanel中,以实现与使用AjaxFileUpload控件相同的所需操作:
<asp:UpdatePanel runat="server" UpdateMode="Always" ID="updPnlName">
<ContentTemplate>
<asp:FileUpload runat="server" ID="fileImport" CssClass="form-control"/>
</ContentTemplate>
</asp:UpdatePanel>
Code Behind: 背后的代码:
protected void btnUpload_OnClick(object sender, EventArgs e)
{
if (fileImport.HasFile)
{
UploadProcessFile();
}
}
private void UploadProcessFile()
{
var fileName = fileImport.FileName;
//Process the rest of your code below you can also assign the file name to your textbox.
}
You can get your image name like this on aspx file on 您可以在aspx文件上获得像这样的图像名称
<asp:AjaxFileUpload ID="itemFileUpload2" runat="server"
Width="300px" OnUploadComplete="itemUploadImage2"
OnClientUploadComplete="abc"/>
use this script 使用这个脚本
function abc(sender, args) {
var Imagename = args.get_fileName();
alert(Imagename );
}
this way is very simple hope this help you 这样很简单,希望对您有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.