如何在Db中保存我的上载图像使用Javascript在C＃代码背后 [英] How Do I Saved In Db My Uploaded Image With Javascript In C# Code Behind
问题描述
你好，
我想做的是用JavaScript上传图像并将该图像保存到后面代码中的数据库（db）（c＃）。
要将其保存到数据库，我需要上传的图像路径。
你能帮助我如何获取从JavaScript到后面代码的上传图像路径。 />
我包含我的.aspx文件和.aspx.cs文件
.aspx文件
< div < span class =code-keyword>> 上传图片< / div >
< div >
< input type =' file' id = FileUploadImage < span class =code-attribute> / > < / div >
< 数字 >
< img id = imgPreview alt = 哟你的图像 src = Images / Maria_Hernandez.jpg width = 100 height = 100 / >
< figcaption >
< asp：标签 ID = lblImagePath runat = 服务器 > < / asp：Label >
< < span class =code-leadattribute> / figcaption >
< / figure >
< div >
< asp：按钮 ID = btnSave runat = 服务器 文本 = 保存配置文件 宽度 = 140px OnClick = btnSave_Click / >
< ; / div >
< script 类型 = text / javascript >
function readURL（输入）{
if （input.files&& input.files [ 0 ]）{
var reader = new FileReader（）;
reader.onload = function （e）{
$（'' ＃imgPreview'）。attr（' src' ，e.target.result）;
}
reader.readAsDataURL（input.files [ 0 ]）;
}
}
$（ ＃FileUploadImage）。更改（功能（）{
readURL（ this ）;
}）;
< / script >
.aspx.cs文件
使用系统;
使用 System.Collections.Generic;
使用 System.Linq;
使用 System.Web;
使用 System.Web.UI;
使用 System.Web.UI.WebControls;
命名空间 WebApplication1
{
public partial class UploadImage：System.Web.UI.Page
{
protected void Page_Load（ object sender，EventArgs e）
{
}
受保护 void btnSave_Click（ object sender，EventArgs e）
{
// 我想在此处保存上传的图像
// 首先我必须从JavaScript中访问上传的图像路径???
}
}
}
（' ＃imgPreview'）。attr（' src'，e.target.result）;
}
reader.readAsDataURL（input.files [ 0 ]）;
}
}
（ ＃FileUploadImage ）。change（ function （）{
readURL（ this ）;
}）;
< / script >
.aspx.cs文件
使用系统;
使用 System.Collections.Generic;
使用 System.Linq;
使用 System.Web;
使用 System.Web.UI;
使用 System.Web.UI.WebControls;
命名空间 WebApplication1
{
public partial class UploadImage：System.Web.UI.Page
{
protected void Page_Load（ object sender，EventArgs e）
{
}
受保护 void btnSave_Click（ object sender，EventArgs e）
{
// 我想在此处保存上传的图像
// 首先我必须从JavaScript中访问上传的图像路径???
}
}
}
图像的路径对您没有任何好处 - 它将是用户计算机上的本地路径，您在服务器上运行的代码将无法访问。
您需要做的是读取已发布到服务器的文件的内容。
将 runat =server添加到文件输入中并访问 PostedFile property：
< input type = ' file' id = FileUploadImage runat = server />
受保护 void btnSave_Click（ object sender，EventArgs e）
{
HttpPostedFile theFile = FileUploadImage.PostedFile;
...
}
或者输入文件 name 并使用 Request.Files collection：
< input type = ' file' id = FileUploadImage name = FileUploadImage />
protected void btnSave_Click（ object sender，EventArgs e）
{
HttpPostedFile theFile = Request.Files [ FileUploadImage];
...
}
现在你已经an HttpPostedFile 实例 [ ^ ]表示上传的文件，您可以将其保存到磁盘 [ ^ ]，或使用 InputStream 属性 [ ^ ]将文件内容读入字节数组，你不能这样做母鸡存储在数据库中。
例如： http://www.aspsnippets.com/Articles/Save-Files-to-SQL-Server-Database-using-FileUpload-Control.aspx [< a href =http://www.aspsnippets.com/Articles/Save-Files-to-SQL-Server-Database-using-FileUpload-Control.aspxtarget =_ blanktitle =New Window> ^
Hello,
What I would like to do is upload image with JavaScript and save that image to the Database (db)in the code behind (c#).
To save it to the db I need the uploaded image path.
Can you help me how to get the uploaded image path from the JavaScript to the code behind.
I include my .aspx file and .aspx.cs file
.aspx file
<div>Upload your image </div>
<div>
<input type='file' id="FileUploadImage" /></div>
<figure>
<img id="imgPreview" alt="your image" src="Images/Maria_Hernandez.jpg" width="100" height="100" />
<figcaption>
<asp:Label ID="lblImagePath" runat="server"></asp:Label>
</figcaption>
</figure>
<div>
<asp:Button ID="btnSave" runat="server" Text="Save Profile" Width="140px" OnClick="btnSave_Click" />
</div>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imgPreview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#FileUploadImage").change(function () {
readURL(this);
});
</script>
.aspx.cs file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class UploadImage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSave_Click(object sender, EventArgs e)
{
// I wouldlike to save the uploaded image here
//First I have to access the uploaded image path from the JavaScript ???
}
}
}('#imgPreview').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } }
("#FileUploadImage").change(function () { readURL(this); }); </script>
.aspx.cs file
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebApplication1 { public partial class UploadImage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnSave_Click(object sender, EventArgs e) { // I wouldlike to save the uploaded image here //First I have to access the uploaded image path from the JavaScript ??? } } }
The path of the image won't do you any good - it will be a local path on the user's computer, which your code running on the server won't be able to access.
What you need to do is read the content of the file which has been posted to the server.
Either addrunat="server"to your file input and access thePostedFileproperty:
<input type='file' id="FileUploadImage" runat="server" />
protected void btnSave_Click(object sender, EventArgs e) { HttpPostedFile theFile = FileUploadImage.PostedFile; ... }
or give the file input anameand use theRequest.Filescollection:
<input type='file' id="FileUploadImage" name="FileUploadImage" />
protected void btnSave_Click(object sender, EventArgs e) { HttpPostedFile theFile = Request.Files["FileUploadImage"]; ... }
Now you've got anHttpPostedFileinstance[^] representing the uploaded file, you can either save it to disk[^], or use theInputStreamproperty[^] to read the content of the file into a byte array, which you can then store in the database.
For example: http://www.aspsnippets.com/Articles/Save-Files-to-SQL-Server-Database-using-FileUpload-Control.aspx[^]
这篇关于如何在Db中保存我的上载图像使用Javascript在C＃代码背后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
