点击图片,AJAX删除后台图片文件的实现代码(asp.net)

包含了2个页面,一个是显示图片的页面,一个是传递文件名,然后删除真实图片的页面。具体的代码如下:
ShowPics.htm:
复制代码 代码如下:

<!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>
<title>Untitled Page</title>
<script src="JS/jquery-1.4.4.js" type="text/javascript"></script>
<script src="JS/json2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("body img").click(function() {
var name = $(this).attr("alt");
$.ajax({
url: "DeletePicsForm.aspx",
data: "picname="+name,
datatype: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function(data, textStatus) {
alert(data.result);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
}
});
});
});
</script>
</head>
<body>
<div>
<img src="http://www.jb51.net/article/Images/xiyangyang.jpg" alt="xiyangyang.jpg" />
</div>
</body>
</html>

具体的删除的页面的代码如下:

DeletePicsForm.aspx.cs:
复制代码 代码如下:

protected void Page_Load(object sender, EventArgs e)
{
if (Request["picname"] != null)
{
Response.Clear();
Response.ContentType = "application/json";
String result = "success";
try
{
File.Delete(Server.MapPath(@"\Images\")+Request["picname"].ToString());
}
catch (Exception ee)
{
result = ee.Message;
}
Response.Write("{\"result\":\"" +result+ "\"}");
Response.End();
}
}

对于上面图片名称的传递,是用的GET方式,想换成POST方式可以用如下的方法:
复制代码 代码如下:

$(function() {
$("body img").click(function() {
var name = $(this).attr("alt");
$.ajax({
url: "DeletePicsForm.aspx",
data: { picname: name },
datatype: "json",
type: "post",
success: function(data, textStatus) {
alert(data.result);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
}
});
});
});

时间: 2024-10-09 14:21:53

点击图片,AJAX删除后台图片文件的实现代码(asp.net)的相关文章

点击图片,AJAX删除后台图片文件的实现代码(asp.net)_实用技巧

包含了2个页面,一个是显示图片的页面,一个是传递文件名,然后删除真实图片的页面.具体的代码如下: ShowPics.htm: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

ajax+php 无刷新文件上传代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="conte

java 后台实现文件上传代码

问题描述 java 后台实现文件上传代码 java后台做一个文件上传,前端选择了照片点击上传到后台,后台需要保存到服务器上, 这个该怎么做,能不能贴一贴现成的代码?求解 解决方案 try { ??????????? FileItemFactory factory = new DiskFileItemFactory(); ??????????? ServletFileUpload upload = new ServletFileUpload(factory); ??????????? ??????

JQuery实现Ajax加载图片的方法_jquery

本文实例讲述了JQuery实现Ajax加载图片的方法.分享给大家供大家参考,具体如下: 最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览. 最先想到的思路是利用缓存,也就是先显示提示消息,然后get图片,在get完的时候回调,将img标签的src改掉,由于刚刚get过,有了缓存,所以图片会立刻显示出来. 页面元素: <input class="picbtn" type="button" value="Next" /> <

ajax php多文件上传代码

<!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> <meta http-equiv="content-

jQuery Ajax方式上传文件的方法_AJAX相关

jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码: <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传

基于jQuery Ajax实现上传文件_jquery

本文实例为大家分享了基于jQuery Ajax实现上传文件的关键代码,供大家参考,具体内容如下 JS代码: //保存 function btnAdd() { var formData = new FormData($("#frm")[0]); $.ajax({ url: "/Admin/ContentManage/SaveEdit", type: "POST", data: formData, contentType: false, //必须fa

jQuery Ajax方式上传文件的方法

jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码: <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传

linux中删除复制移动文件rm,mv,cp命令详解

先看实例 删除复制移动文件命令 Linux代码 rm -rf /file -r:递归处理参数 -f:强制删除所有文件 Linux代码 cp /test1/file1 /test3/file2 将file1复制到test3下,并改名为file2 Linux代码 cp -a test test1 将test目录下的所有子目录复制到test1下 Linux代码 mv /test1/file1 /test2/test2 将file1移动到test2下,并改名为test2 cp命令 该命令d功能匙将给出d