点击图片,AJAX删除后台图片文件

点击页面上的图片，用jQuery的AJAX来删除后台真实的文件。

包含了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="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);
                    }
                });
            });
        });

转载于:https://www.cnblogs.com/chenping-987123/archive/2010/11/24/1886563.html

点击图片,AJAX删除后台图片文件相关推荐

ajax获取后台图片数据流如何处理？
当我们利用ajax从后台获取图片的时候,一般有两种方法. 一种是获取后台传递过来的图片的url 一种是获取后台传递过来的图片数据流. 当我们获取图片数据流的时候,应该这样处理这些数据流,让它在前台展示 ...
python类似图片查找_python查找重复图片并删除（图片去重）
本文实例为大家分享了python查找重复图片并删除的具体代码,供大家参考,具体内容如下和网络爬虫配套的,也可单独使用,从网上爬下来的图片重复太多,代码支持识别不同尺寸大小一致的图片,并把重复的图片删 ...
Axios和Ajax处理后台返回文件流实现文件下载（图片和Excel）
Axios //定义公共方法,下载Excel download(url,data,fileName) {return axios({method: 'post',url,// headers里面设置t ...
Java 视频截取帧数保存为本地图片及删除本地图片
业务功能实现了通过视频URL截取帧数并保存为图片操作. 通过URL获取视频解析并获取其中某一帧数图片并转换为 base64字符串并输入到对应位置保存操作,最终删除该保存的临时图片以及临时目录 pub ...
ajax请求后台下载文件
今天遇到一个需求,利用freemarker进行word导出.一般我们都是写好word模板,然后后台查询到所需要的数据,数据+模板=输出,利用freemarker提供的api进行word导出的.我这里有 ...
html图片右上角删除按钮,图片右上角删除
# 图示 ![mark](http://qiniu.newthink.cc/blog/180921/Cgl5AKF1mi.png) # GIT 地址:https://gitee.com/hongwei ...
python删除图片_删除相同图片,Python实现
Python实现:import os import re import hashlib from time import time rootPath = 'F:/Image/照片' backupPat ...
ajax接收后台传来的图片
图片与base64的转换图片对象转换base64 ByteArrayOutputStream baos = new ByteArrayOutputStream();//io流ImageIO.writ ...
苹果手机删除的图片怎么恢复？试试这3个方法
苹果手机在使用的过程时,大家会发现自己手机相册里的图片越来越多,多到占用了自己手机非常多的内存.所以大家都会经常去清理自己苹果手机相册里的图片,在清理图片的时候大家或多或少都会不小心把一些重要的图片给 ...

点击图片,AJAX删除后台图片文件

点击图片,AJAX删除后台图片文件相关推荐

最新文章

热门文章