上传后删除图片 [英] Delete image after uploading
本文介绍了上传后删除图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，我想在上传后删除图片，我想查看：
< div id = tabs-3 >
@using（Html.BeginForm（ UploadMorePhotos， 帐户，FormMethod.Post， new {enctype = multipart / form-data}））
{
@ Html.AntiForgeryToken（）
< div class = form-field >
< p>选择图片：< / p >
< div 类 = < span class =code-string> upload-container >
< div class = upload >
< input type = file name = files value = multiple = multiple id = file1 />
< img src = @ Url.Content（〜/ images / deleteButton.png ） alt = 删除图片。 />
< / div >
< / div >
< / div >
< div class = form-field >
< input type = 提交 值 = 上传 />
< / div >
< br />
foreach （ var item in Model.LolaBikePhotos）
{
< img src = 〜/ Images/profile/@item.ImagePath alt = height = 150 width = 200 />
使用（Html.BeginForm（ DeleteFiles））
{
< table>
< tr>
< td> < / td >
< td>文件名< / td >
< / tr >
< tr>
< td>
< input type = 复选框 name = FileIds value = @ item.ImagePath />
< / td >
< td> @ item.ImagePath < / td >
< / tr >
< / table >
< input type = submit value = 删除 />
}
}
}
< br />
< / div >
javascript：
var currentImage = 1 < /跨度>;
$（ body）。on（ 更改， 输入[ name ='files']， function （）{
var pathToRemoveIcon = @ Url.Content（〜/ Images / deleteButton.png ）;
currentImage = currentImage + 1 ;
var htmlToAppend = ' < div class = upload>< input type =filename =filesid =file' + currentImage + ' />< img src =' + pathToRemoveIcon + ' alt =删除图片。/>< / div>';
$（' .upload-container'）。append（htmlToAppend）;
}）。on（ 点击， 。upload img， function （）{
if （$（ this ）。parent（）。siblings（）。length> 0 ）{
$（ this ）。parent（）。remove（）;
}
}）;
这是我的行动方式：
[HttpPost]
public ActionResult UploadMorePhotos（UserProfile user，IEnumerable< HttpPostedFileBase> files）
{
foreach （ var 文件在文件中）
{
if （file.ContentLength > 0 ）
{
var fileName = Path.GetFileName（file.FileName）;
var path = Path.Combine（Server.MapPath（ 〜/ Images / profile + @ \ + fileName .Replace（' +'，' _'）））;
file.SaveAs（path）;
if （ModelState.IsValid）
{
string username = User.Identity.Name;
// 获取userprofile
user = db.userProfiles.FirstOrDefault（u = > u.UserName.Equals（username））;
// 更新字段
user.Image = new byte [file.ContentLength];
file.InputStream.Read（user.Image， 0 ，file.ContentLength）;
user.ImageMimeType = file.ContentType;
db.Entry（user）.State = EntityState.Modified;
if （user！= null ）
{
var lolaphoto = new LolaBikePhoto
{
UserProfileID = user.Id
};
db.lolabikerPhotos.Add（lolaphoto）;
lolaphoto.ImagePath = fileName;
}
}
db.SaveChanges（）;
}
}
return 重定向（Url.Action（ 编辑， 帐户）+ ＃tabs-3 ）;
}
[HttpPost]
public ActionResult DeleteFiles（ IEnumerable< HttpPostedFileBase>文件）
{
foreach （ var id 在文件中）
{
var fileName = Path.GetFileName（id.FileName）;
var path = Path.Combine（Server.MapPath（ 〜/ Images / profile + @ \ + fileName .Replace（' +'，' _'）））;
var file = db.lolabikerPhotos.Find（id）;
// 使用路径删除文件
System.IO.File.Delete（path）;
}
return 查看（）;
}
但是如果我选择图片并按删除我会收到此错误：
'/'应用程序中的服务器错误。
对象引用未设置为对象的实例。
描述：执行当前Web请求期间发生未处理的异常。请查看堆栈跟踪以获取有关错误及其源自代码的位置的更多信息。
异常详细信息：System.NullReferenceException：未将对象引用设置为对象的实例。
来源错误：
第397行：foreach（文件中的var文件）
第398行：{
第399行：如果（ file.ContentLength> 0）
第400行：{
第401行：var fileName = Path.GetFileName（file.FileName）;
源文件：g：\ Mijn Documents \ My网站\ Lolabikes - Copy \C＃\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ >
谢谢
oke，我现在就喜欢这个：
@ foreach（ var item in Model.LolaBikePhotos）
{
< table>
< tr>
< td>
< img src = / Images / profile / @ item。 ImagePath alt = height = 150 width = 200 />
< a href = / Images/profile/@item.PhotoID class = photo-delete-link> ;删除< / a >
@ *< input type = 复选框 name = files value = @ item.ImagePath /> * @
< / td >
@ *< td> @ item.ImagePath < / td > * @
< / tr >
< / 表格 >
< input type = submit class = photo-delete-link value = 删除 />
}
和ajax电话：
// 删除照片：
$（' .photo-delete-link'）。点击（ function （e）{
$ .ajax（{
url： / Account / DeleteFiles /，
dataType： text json，
类型： POST，
data：{}，
成功： function （data，textStatus）{}
}）;
e.preventDefault（ ）;
}）;
// 结束删除照片
和控制器动作：
[HttpPost]
// [ValidateAntiForgeryToken]
public ActionResult DeleteFiles（IEnumerable< HttpPostedFileBase>文件）
{
foreach （ var id in files）
{
var fileName = Path。用GetFileName（id.FileName）;
var path = Path.Combine（Server.MapPath（ 〜/ Images / profile + @ \ + fileName .Replace（' +'，' _'）））;
var file = db.lolabikerPhotos.Find（id）;
// 您现在可以访问该文件的信息，包括路径，名称，等
// 使用您的文件路径删除文件（路径+文件名）
System.IO.File.Delete（path）;
db.SaveChanges（）;
}
return 重定向（Url.Action（ 编辑， 帐户）+ ＃tabs-3）;
}
但它现在命中了action方法，但文件为null。是的，我选择了一张照片，所以文件系统中有照片和我在正确的数据库表中看到的名字。
谢谢
好吧，我现在就这样：
// 删除照片：
$（' .photo-delete-link'）。点击（ function （e）{
$ .ajax（{
type： POST，
url： / Account / DeleteFiles /，
contentType： false ，
processData： false ，
dataType： text jso n，
数据：数据，
成功：功能（data，textStatus）{}
}）;
e.preventDefault（）;
}）;
// 结束删除照片
然后我得到这个：
< a href =http：// localhost：41787 / Images / profile / 97> http：// localhost：41787 / Images / profile / 97< / a> [< a href =http： // localhost：41787 / Images / profile / 97target =_ blanktitle =新窗口> ^< / a>]
无法找到资源。
描述：HTTP 404.您要查找的资源（或其中一个依赖项）可能已被删除，名称已更改或暂时不可用。请查看以下网址，确保拼写正确。
请求的网址：/ Images / profile / 97
但97是id：PhotoID 97
但操作方法：当我按下删除时，现在没有点击DeleteFiles
如果我这样做：
// 删除照片：
$（' 。photo-delete-link' ）.click（ function （e）{
$ .ajax（{
type： POST，
url： / Account / DeleteFiles /，
contentType： false ，
processData： false ，
数据：数据，
成功： function （）{}
}）;
e.preventDefault（）;
}）;
// 结束删除照片
我得到这个：
'/'应用程序中的服务器错误。
无法找到资源。
描述：HTTP 404.您要查找的资源（或其中一个依赖项）可能已被删除，名称已更改或暂时不可用。请查看以下网址，确保拼写正确。
请求的网址：/ Images / profile / 97
并且Action方法没有达到
如果我这样做：
// 删除照片：
$（' .photo-delete-link'）。点击（ function （e）{
$ .ajax（{
url： / Account / DeleteFiles /，
dataType： text json，
type： POST，
data：{}，
成功： function （数据，textStatus）{}
}）;
e.preven tDefault（）;
}）;
// 结束删除照片
动作方法将被触发，但随后：
foreach （ var id in 个文件）
文件是空的
oke，
我现在有了它这个：
$（' 。photo-delete-link'）。点击（ function （e）{
$ .ajax（{
类型： POST，
url： / Account / DeleteFiles /，
contentType： false ，
processData： false ，
data：$（ #formId）。serialize（），
成功： function （）{}
}）;
e.preventDefault（）;
}）;
并且确实触发了操作方法。
但是它仍然说：文件为空。怎么会是null？我选择照片然后按删除
我现在就这样：
< pre lang = c＃ > < div id = tabs-3 >
@using（Html.BeginForm（ UploadMorePhotos， 帐户，FormMethod.Post， new {enctype = multipart / form-data }））
{
@ Html.AntiForgeryToken（）
< div class = < span class =code-string> form-field >
< p>选择图片：< / p >
< div class = upload-container >
< div < span class =code-keyword> class = upload >
< input type = file name = files value = multiple = multiple id = file1 />
< img src = @ Url.Content（〜/ images / deleteButton.png ） alt = 删除图片。 />
< / div >
< / div >
< / div >
< div class = form-field >
< input type = 提交 值 = 上传 />
< / div >
< br />
}
// 这是用于删除文件。所以你可以选择一个并删除：
@foreach（ var item in Model.LolaBikePhotos）
{
< table>
< tr>
< td>
< img src = / Images / profile / @ item。 ImagePath alt = height = 150 width = 200 />
< a href = / Images / profile / @ item class = photo-delete-link>删除< / a >
@ *< input type = 复选框 name = files value = @ item.ImagePath /> * @
< / td >
@ *< td> @ item.ImagePath < / td > * @
< / tr >
< / < span class =code-leadattribute> table >
< input type = submit value = 删除 />
}
< br />
< / div >
javascript：
// 删除照片：
$（' .photo-delete-link'）。click（ function （e）{
$ .ajax（{
type： POST\",
url: \"/Account/DeleteFiles/\",
contentType: false,
processData: false, $b $b data: $(\"#id\").serialize(),
success: function () { }
});
e.preventDefault();
});
But what is my formid? Thank you
oke,
I have it now like this:
<div id=\"tabs-3\">
@using (Html.BeginForm(\"UploadMorePhotos\", \"Account\", FormMethod.Post, new { enctype = \"multipart/form-data\", id = \"formSubmit\" }))
{
@Html.AntiForgeryToken()
<div class=\"form-field\">
<p> ;Select pictures:</p>
<div class=\"upload-container\">
<div class=\"upload\">
<input type=\"file\" name=\"files\" value=\"\" multiple=\"multiple\" id=\"file1\" />
<img src=\"@Url.Content(\"~/images/deleteButton.png\")\" alt=\"Remove picture.\" />
</div>
</div>
</div>
<div class=\"form-field\">
<input type=\"submit\" value=\"Upload\" />
</div>
<br />
foreach (var item in Model.LolaBikePhotos)
{
<table>
<tr>
< td>
<img src=\"/Images/profile/@item.ImagePath\" alt=\"\" height=150 width=200 />
<a href=\"/Images/profile/@item.PhotoID\" class=\"photo-delete-link\">Delete</a>
@*<input type=\"checkbox\" name=\"files\" value=\"@item.ImagePath\" />*@
</td>
@*<td>@item.ImagePath</td>*@
</tr>
</table>
<input type=\"submit\" value=\"Delete\" />
}
}
and javascript:
//Delete photo:
$('.photo-delete-link').click(function (e) {
$.ajax({
type: \"POST\",
url: \"/Account/DeleteFiles/\",
contentType: false,
processData: false,
data: $(\"#formSubmit\").serialize(),
success: function () { }
});
e.preventDefault();
}）;
the action method has been triggered, but still files null?
THis:
$('.photo-delete-link').click(function (e) {
$.ajax({
type: \"POST\",
url: \"/Account/DeleteFiles/\",
contentType: false,
processData: false,
data: $(\"#formSubmit\").serialize(),
success: function (data) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(\"What you do??\");
}
});
e.preventDefault();
}）;
Still get the error message :(
解决方案 (\"body\").on(\"change\", \"input[name='files']\", function () {
var pathToRemoveIcon = \"@Url.Content(\"~/Images/deleteButton.png\")\";
currentImage = currentImage + 1;
var htmlToAppend = '<div class=\"upload\"><input type=\"file\" name=\"files\" id=\"file' + currentImage + '\" /><img src=\"' + pathToRemoveIcon + '\" alt=\"Remove picture.\" /></div>';
('.upload-container').append(htmlToAppend);
}).on(\"click\", \".upload img\", function () {
if (
(this).parent().siblings().length > 0) {
Hi everybody, i want to delete an image after uploading, I have this for view:
<div id="tabs-3">
@using (Html.BeginForm("UploadMorePhotos", "Account", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-field">
<p>Select pictures:</p>
<div class="upload-container">
<div class="upload">
<input type="file" name="files" value="" multiple="multiple" id="file1" />
<img src="@Url.Content("~/images/deleteButton.png")" alt="Remove picture." />
</div>
</div>
</div>
<div class="form-field">
<input type="submit" value="Upload" />
</div>
<br />
foreach (var item in Model.LolaBikePhotos )
{
<img src="~/Images/profile/@item.ImagePath" alt="" height=150 width=200 />
using (Html.BeginForm("DeleteFiles"))
{
<table>
<tr>
<td></td>
<td>File Name</td>
</tr>
<tr>
<td>
<input type="checkbox" name="FileIds" value="@item.ImagePath" />
</td>
<td>@item.ImagePath</td>
</tr>
</table>
<input type="submit" value="Delete" />
}
}
}
<br />
</div>
javascript:
var currentImage = 1;
$("body").on("change", "input[name='files']", function () {
var pathToRemoveIcon = "@Url.Content("~/Images/deleteButton.png")";
currentImage = currentImage + 1;
var htmlToAppend = '<div class="upload"><input type="file" name="files" id="file' + currentImage + '" /><img src="' + pathToRemoveIcon + '" alt="Remove picture." /></div>';
$('.upload-container').append(htmlToAppend);
}).on("click", ".upload img", function () {
if ($(this).parent().siblings().length > 0) {
$(this).parent().remove();
}
});
and this are my action methods:
[HttpPost]
public ActionResult UploadMorePhotos(UserProfile user, IEnumerable<HttpPostedFileBase> files)
{
foreach (var file in files)
{
if (file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/Images/profile" + @"\" + fileName.Replace('+', '_')));
file.SaveAs(path);
if (ModelState.IsValid)
{
string username = User.Identity.Name;
// Get the userprofile
user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));
// Update fields
user.Image = new byte[file.ContentLength];
file.InputStream.Read(user.Image, 0, file.ContentLength);
user.ImageMimeType = file.ContentType;
db.Entry(user).State = EntityState.Modified;
if (user != null)
{
var lolaphoto = new LolaBikePhoto
{
UserProfileID = user.Id
};
db.lolabikerPhotos.Add(lolaphoto);
lolaphoto.ImagePath = fileName;
}
}
db.SaveChanges();
}
}
return Redirect(Url.Action("Edit", "Account") + "#tabs-3");
}
[HttpPost]
public ActionResult DeleteFiles(IEnumerable<HttpPostedFileBase> files)
{
foreach (var id in files)
{
var fileName = Path.GetFileName(id.FileName);
var path = Path.Combine(Server.MapPath("~/Images/profile" + @"\" + fileName.Replace('+', '_')));
var file = db.lolabikerPhotos.Find(id);
// delete file using path
System.IO.File.Delete(path);
}
return View();
}
but if I select image and press delete I get this error:
Server Error in '/' Application.
Object reference not set to an instance of an object.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
Source Error:
Line 397: foreach (var file in files)
Line 398: {
Line 399: if (file.ContentLength > 0)
Line 400: {
Line 401: var fileName = Path.GetFileName(file.FileName);
Source File: g:\Mijn Documents\My Web Sites\Lolabikes - Copy\C#\ContosoUniversity\Controllers\AccountController.cs Line: 399
Thank you
oke, I have it now like this:
@foreach (var item in Model.LolaBikePhotos )
{
<table>
<tr>
<td>
<img src="/Images/profile/@item.ImagePath" alt="" height=150 width=200 />
<a href="/Images/profile/@item.PhotoID" class="photo-delete-link">Delete</a>
@*<input type="checkbox" name="files" value="@item.ImagePath" />*@
</td>
@*<td>@item.ImagePath</td>*@
</tr>
</table>
<input type="submit" class="photo-delete-link" value="Delete" />
}
and ajax call:
//Delete photo:
$('.photo-delete-link').click(function (e) {
$.ajax({
url: "/Account/DeleteFiles/",
dataType: "text json",
type: "POST",
data: {},
success: function (data, textStatus) { }
});
e.preventDefault();
});
//End Delete photo
and controller action:
[HttpPost]
//[ValidateAntiForgeryToken]
public ActionResult DeleteFiles(IEnumerable<HttpPostedFileBase> files)
{
foreach (var id in files)
{
var fileName = Path.GetFileName(id.FileName);
var path = Path.Combine(Server.MapPath("~/Images/profile" + @"\" + fileName.Replace('+', '_')));
var file = db.lolabikerPhotos.Find(id);
// you now have access to the information of the file, including path, name, etc
// delete file using your filepath (path + filename)
System.IO.File.Delete(path);
db.SaveChanges();
}
return Redirect(Url.Action("Edit", "Account") + "#tabs-3");
}
but it hits now the action method, but files is null. And yes, I select a photo, so there is photo in the file system and the name I see in the correct database table.
Thank you
ok, I have it now like this:
//Delete photo:
$('.photo-delete-link').click(function (e) {
$.ajax({
type: "POST",
url: "/Account/DeleteFiles/",
contentType: false,
processData: false,
dataType: "text json",
data: data,
success: function (data, textStatus) { }
});
e.preventDefault();
});
//End Delete photo
but then I get this:
<a href="http://localhost:41787/Images/profile/97">http://localhost:41787/Images/profile/97</a>[<a href="http://localhost:41787/Images/profile/97" target="_blank" title="New Window">^</a>]
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /Images/profile/97
But 97 is the id of:PhotoID 97
But the action method: DeleteFiles is not hit now when I press on Delete
if I do this:
//Delete photo:
$('.photo-delete-link').click(function (e) {
$.ajax({
type: "POST",
url: "/Account/DeleteFiles/",
contentType: false,
processData: false,
data: data,
success: function () { }
});
e.preventDefault();
});
//End Delete photo
I get this:
Server Error in '/' Application.
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /Images/profile/97
And the Action method is not hitting
if I do this:
//Delete photo:
$('.photo-delete-link').click(function (e) {
$.ajax({
url: "/Account/DeleteFiles/",
dataType: "text json",
type: "POST",
data: {},
success: function (data, textStatus) { }
});
e.preventDefault();
});
//End Delete photo
the action method will be triggered, but then:
foreach (var id in files)
files is null
oke,
I have it now like this:
$('.photo-delete-link').click(function (e) {
$.ajax({
type: "POST",
url: "/Account/DeleteFiles/",
contentType: false,
processData: false,
data:$("#formId").serialize() ,
success: function () { }
});
e.preventDefault();
});
and the action method is indeed been triggered.
but then it still says: files is null. How can it be null? I select the photo and press delete
I have it now like this:
<pre lang="c#"> <div id="tabs-3">
@using (Html.BeginForm("UploadMorePhotos", "Account", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-field">
<p>Select pictures:</p>
<div class="upload-container">
<div class="upload">
<input type="file" name="files" value="" multiple="multiple" id="file1" />
<img src="@Url.Content("~/images/deleteButton.png")" alt="Remove picture." />
</div>
</div>
</div>
<div class="form-field">
<input type="submit" value="Upload" />
</div>
<br />
}
//This is for deleting files. SO you can select one and delete:
@foreach (var item in Model.LolaBikePhotos )
{
<table>
<tr>
<td>
<img src="/Images/profile/@item.ImagePath" alt="" height=150 width=200 />
<a href="/Images/profile/@item" class="photo-delete-link">Delete</a>
@*<input type="checkbox" name="files" value="@item.ImagePath" />*@
</td>
@*<td>@item.ImagePath</td>*@
</tr>
</table>
<input type="submit" value="Delete" />
}
<br />
</div>
javascript:
//Delete photo:
$('.photo-delete-link').click(function (e) {
$.ajax({
type: "POST",
url: "/Account/DeleteFiles/",
contentType: false,
processData: false,
data: $("#id").serialize(),
success: function () { }
});
e.preventDefault();
});
But what is my formid? Thank you
oke,
I have it now like this:
<div id="tabs-3">
@using (Html.BeginForm("UploadMorePhotos", "Account", FormMethod.Post, new { enctype = "multipart/form-data", id = "formSubmit" }))
{
@Html.AntiForgeryToken()
<div class="form-field">
<p>Select pictures:</p>
<div class="upload-container">
<div class="upload">
<input type="file" name="files" value="" multiple="multiple" id="file1" />
<img src="@Url.Content("~/images/deleteButton.png")" alt="Remove picture." />
</div>
</div>
</div>
<div class="form-field">
<input type="submit" value="Upload" />
</div>
<br />
foreach (var item in Model.LolaBikePhotos)
{
<table>
<tr>
<td>
<img src="/Images/profile/@item.ImagePath" alt="" height=150 width=200 />
<a href="/Images/profile/@item.PhotoID" class="photo-delete-link">Delete</a>
@*<input type="checkbox" name="files" value="@item.ImagePath" />*@
</td>
@*<td>@item.ImagePath</td>*@
</tr>
</table>
<input type="submit" value="Delete" />
}
}
and javascript:
//Delete photo:
$('.photo-delete-link').click(function (e) {
$.ajax({
type: "POST",
url: "/Account/DeleteFiles/",
contentType: false,
processData: false,
data: $("#formSubmit").serialize(),
success: function () { }
});
e.preventDefault();
});
the action method has been triggered, but still files null?
THis:
$('.photo-delete-link').click(function (e) {
$.ajax({
type: "POST",
url: "/Account/DeleteFiles/",
contentType: false,
processData: false,
data: $("#formSubmit").serialize(),
success: function (data) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert("What you do??");
}
});
e.preventDefault();
});
Still get the error message :(
解决方案 ("body").on("change", "input[name='files']", function () {
var pathToRemoveIcon = "@Url.Content("~/Images/deleteButton.png")";
currentImage = currentImage + 1;
var htmlToAppend = '<div class="upload"><input type="file" name="files" id="file' + currentImage + '" /><img src="' + pathToRemoveIcon + '" alt="Remove picture." /></div>';
('.upload-container').append(htmlToAppend);
}).on("click", ".upload img", function () {
if (
(this).parent().siblings().length > 0) {
这篇关于上传后删除图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
