自己写的图片上传

最新推荐文章于 2024-03-17 20:35:51 发布

weizengxun

最新推荐文章于 2024-03-17 20:35:51 发布

阅读量2.4k

点赞数

文章标签： textbox function button file exception string

本文链接：https://blog.csdn.net/weizengxun/article/details/6727781

版权

该博客展示了如何实现一个简单的图片上传功能，每次仅允许上传一张图片，并且在上传新图片时会删除已有的图片。用户双击图片可以删除。功能实现涉及asp.net页面代码、后台处理和JavaScript交互，利用jQuery库进行交互增强。

摘要由CSDN通过智能技术生成

先看效果图：

文件布局：

defualt.aspx代码：

<head runat="server">
    <title></title>
    <script src="script/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="script/jquery.form.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <table width="600">
        <tr>
            <td style="width: 150px; text-align: right;">
                用户名：
            </td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td style="width: 150px; text-align: right;">
                图片名称：
            </td>
            <td>
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td style="width: 150px; text-align: right;">
                图片：
            </td>
            <td>
                <asp:HiddenField ID="ImageHideFile" runat="server" />
                <div id="dvi" style="clear: both; margin-bottom: 5px;">
                </div>
                <span id="filespan">
                    <input type="file" name="file" id="FileUpload" />
                </span> 
                <input id="UploadButton" type="button" value="upload" />
            </td>
        </tr>
        <tr>
            <td colspan="2" style="padding-left: 160px">
                <asp:Button ID="Button4" runat="server" Text="Submit" OnClick="Button2_Click" />
            </td>
        </tr>
    </table>
    </form>

    <script src="script/JScript.js" type="text/javascript"></script>

</body>

default.aspx后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    webpublic wp = new webpublic();
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        wp.ShowMessageBox(ImageHideFile.Value);
        //wp.Show_Msg(ImageHideFile.Value);
    }
}

webpublic.cs主要代码：

/// <summary>
    /// 页面只弹出消息框，不跳转，不刷新！
    /// </summary>
    /// <param name="msg"></param>
    public void ShowMessageBox(string msg)
    {
        Page page = (Page)HttpContext.Current.CurrentHandler;
        page.ClientScript.RegisterStartupScript(GetType(), "", "<script>alert('" + msg + "')</script>");
    }

/// <summary>
    /// 验证文件类型
    /// </summary>
    /// <param name="file">上传上来的文件</param>
    /// <returns></returns>
    public Boolean IsAllowedExtension(HttpPostedFile file)
    {
        int fileLen = file.ContentLength;
        byte[] imgArray = new byte[fileLen];
        file.InputStream.Read(imgArray, 0, fileLen);
        MemoryStream ms = new MemoryStream(imgArray);
        System.IO.BinaryReader br = new System.IO.BinaryReader(ms);
        string fileclass = "";
        byte buffer;
        try
        {
            buffer = br.ReadByte();
            fileclass = buffer.ToString();
            buffer = br.ReadByte();
            fileclass += buffer.ToString();
        }
        catch
        {
        }
        finally
        {
            br.Close();
            ms.Close();
        }
        //说明255216是jpg;7173是gif;6677是BMP,13780是PNG;7790是exe,8297是rar
        if (fileclass == "255216" || fileclass == "7173" || fileclass == "6677" || fileclass == "13780")
            return true;
        else
            return false;
    }

// <summary>
    /// 提示成功信息！.back()
    /// </summary>
    /// <param name="msg"></param>
    /// <param name="url"></param>
    public void Show_Msg(string msg)
    {

        HttpContext.Current.Response.Write("<script>alert(\"" + msg + "\");history.back();</script>");
        HttpContext.Current.Response.End();
    }

fileupload.aspx的后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class WebAdmin_fileupload : System.Web.UI.Page
{
    webpublic wp = new webpublic();

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Files["file"] != null)
        {
            HttpPostedFile file = Request.Files["file"];
            //验证文件格式
            if (wp.IsAllowedExtension(file))
            {
                Random ra = new Random();
                String filePath = "~/Files/" + DateTime.Now.ToString("yyyyMMddHHmmssfff") + ra.Next(1000, 9999)
                    //获取文件后缀
                    + System.IO.Path.GetExtension(file.FileName);
                try
                {
                    file.SaveAs(Server.MapPath(filePath));
                    Response.Write(ResolveUrl(filePath));
                }
                catch (Exception)
                {
                    Response.Write("文件上传发生错误!");
                }
            }
            else
            {
                Response.Write("文件格式不正确！");
            }
        }

        if (Request["myurl"] != null)
        {
            var url =Request["myurl"];
            try
            {
                System.IO.File.Delete(Server.MapPath(url));
                Response.Write("文件删除成功！");
            }
            catch (Exception)
            {
                Response.Write("文件删除失败！");
            }
        }
        Response.End();
    }
}

js代码部分：

$(document).ready(function() {
    var img = document.createElement("img");
    img.title = "双击图片可删除图片";
    img.id = "UploadImg";
    img.height = "100";
    $("#UploadButton").click(function() {
        if ($("#FileUpload").val() == "") {
            alert("请选择要上传的图片！");
            return false;
        }
        //如果已有图片，则先把图片删除
        if ($("#ImageHideFile").val() != "") {
            $.get("fileupload.aspx?myurl=" + $("#ImageHideFile").val(),
            function(data) {
                $("#ImageHideFile").val("");
                $("#UploadImg").attr("src", "");
            });
        }
        var myform = document.createElement("form");
        myform.action = "fileupload.aspx";
        myform.method = "post";
        myform.enctype = "multipart/form-data";
        document.body.appendChild(myform);  //创建表单后一定要加上这句否则得到的form不能上传。                                               //document后要加上body,否则火狐下不行。
        var form = $(myform);
        var fu = $("#FileUpload").clone(true).val("");
        var fua = $("#FileUpload").appendTo(form);
        $("#filespan").html("<img src=\"images/loading.gif\" />   正在上传..  ");

        form.ajaxSubmit({
            success: function(data) {
                if (data == "文件上传发生错误!" || data == "文件格式不正确！") {
                    alert(data);
                }
                else {
                    $("#ImageHideFile").val(data);
                    $("#dvi").find("img").remove();
                    $("#dvi").append($(img));//要先append再给img赋值，否则在ie下不能缩小宽度
                    $(img).attr("src", data);                    
                 //绑定图片双击事件。实现双击图片删除图片
                    $(img).bind("dblclick",
                    function() {
                        if ($("#ImageHideFile").val() == "") {
                            return;
                        }
                        $.get(
                            "fileupload.aspx?myurl=" + $("#ImageHideFile").val(),
                            function(data) {
                                alert(data);
                                if (data == "文件删除成功！") {
                                    $("#ImageHideFile").val("");
                                    $(img).remove();
                                }
                                $("#UploadImg").attr("src", $("#ImageHideFile").val());
                            });
                    });
                }
                $("#filespan").html(fu);
                form.remove();
            }
        });
    });
});

每次只能上传一张图片。每次上传时如果已经有图片则把原图删除再上传，上传后双击图片可删除图片。适合用于只上传一张图片。

引用了这两个类库

2011年9月13日改进版本请看：http://blog.csdn.net/weizengxun/article/details/6769977