自己写的图片上传_ajax上传(增强版)

上篇回顾请看：http://blog.csdn.net/weizengxun/article/details/6727781

效果图：

效果图一（未上传之前和删除之后）

效果图二（图片上传中）

效果图三（图片上传后）

效果图四（双击图片时，弹出确认框，火狐下的效果）

效果图五（图片删除成功）

js文件：

$(document).ready(function() {
    if ($("#dvi").find("img").length!=0) {
        var myimg = $("#dvi").find("img");		
		myimg.attr("title","双击图片可删除图片");
        myimg.bind("dblclick",
			function() {
				if ($("#ImageHideFile").val() == "") {
					return;
				}
				if(confirm("您确定要删除吗？"))
				{
					$.get(
					"../fileupload.aspx?myurl=" + $("#ImageHideFile").val(),
					function(data) {
						alert(data);
						if (data == "文件删除成功！") {
							$("#ImageHideFile").val("");
							$(myimg).remove();
						}
						$("#UploadImg").attr("src", $("#ImageHideFile").val());
					});
				}
			});
    }
    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(); //如果上传成功，则移走现有的图片（实际上在服务其已经不存在了），然后再把新上传的图片加到div上
                    $("#dvi").append($(img)); //要先append再给img赋值，否则在ie下不能缩小宽度
                    $(img).attr("src", data);
                    $(img).bind("dblclick",
                    function() {
                        if ($("#ImageHideFile").val() == "") {
                            return;
                        }
                        if(confirm("您确定要删除吗？"))
						{
							$.get(
							"../fileupload.aspx?myurl=" + $("#ImageHideFile").val(),
							function(data) {
								alert(data);
								if (data == "文件删除成功！") {
									$("#ImageHideFile").val("");
									$(myimg).remove();
								}
								$("#UploadImg").attr("src", $("#ImageHideFile").val());
							});
						}
                    });
                }
                $("#filespan").html(fu);
                form.remove();
            }
        });
    });
});

前台代码（修改文章）

<tr>
                    <td class="tdleft">
                        文章缩略图：
                    </td>
                    <td>                        
                        <asp:HiddenField ID="ImageHideFile" runat="server" />
                        <div id="dvi" style="clear: both; margin-bottom: 5px;">
                            <asp:Image ID="RoomImage" runat="server" Height="100" />
                        </div>
                        <span id="filespan">
                            <input type="file" name="file" id="FileUpload" />
                        </span> 
                        <input id="UploadButton" type="button" value="upload" /> <%--<span>图片最适合宽度 390px × 228px。双击图片可删除图片。</span>--%>
                    </td>
                </tr>

后台加载时绑定数据

private void BindData()
    {
        try
        {
            var model = news.GetModel(int.Parse(Request["id"]));
            ArtAddTime.Text = String.Format("{0:yyyy\\/MM\\/dd HH:mm:ss}", model.ArtAddTime);
            ArtAuthor.Text = model.ArtAuthor;
            ArtContent.Text = model.ArtContent;
            ArtDescription.Text = model.ArtDescription;
            ArtEditor.Text = model.ArtEditor;
            ArtFrom.Text = model.ArtFrom;
            if (model.ArtImage != null && model.ArtImage.Trim() != "")
            {
                ImageHideFile.Value = ResolveUrl(model.ArtImage);
                RoomImage.ImageUrl = model.ArtImage;
                RoomImage.Visible = true;
            }
            ArtKeywords.Text = model.ArtKeywords;
            ArtSeoDescriptin.Text = model.ArtSeoDescriptin;
            ArtSeoTitle.Text = model.ArtSeoTitle;
            ArtTitle.Text = model.ArtTitle;
            ArtUpdateTime.Text = String.Format("{0:yyyy\\/MM\\/dd HH:mm:ss}", model.ArtUpdateTime);
            ddlCategory.SelectedValue = model.CateId.ToString();
        }
        catch (Exception ex)
        {
            wp.ShowMessageBox("数据加载发生错误！" + ex.Message);
        }
    }

此处实现绑定数据时给img添加双击事件

//如果dvi下有图片则绑定双击事件  
if ($("#dvi").find("img").length!=0) {
        var myimg = $("#dvi").find("img");		
		myimg.attr("title","双击图片可删除图片");
        myimg.bind("dblclick",
			function() {
				if ($("#ImageHideFile").val() == "") {
					return;
				}
				if(confirm("您确定要删除吗？"))
				{
					$.get(
					"../fileupload.aspx?myurl=" + $("#ImageHideFile").val(),
					function(data) {
						alert(data);
						if (data == "文件删除成功！") {
							$("#ImageHideFile").val("");
							$(myimg).remove();
						}
						$("#UploadImg").attr("src", $("#ImageHideFile").val());
					});
				}
			});
    }

此版本增强了如下功能。

1、完善了修改图片时，加载的时候不能删除图片，现在可以了。

2、删除图片时弹出确认对话框。

本列经过火狐6.0和ie6、ie8测试都是可以的（感觉用juqery写的东西兼容性都强一点）。

本来想把后台实现的方法也写上，但是还是懒的写了。

喜欢的朋友、想要demo的朋友可以给我留言！

上篇回顾请看：http://blog.csdn.net/weizengxun/article/details/6727781

后一篇：图片上传_ajax上传之改进版本
后后一篇： 图片上传_ajax上传之实际应用(附上Demo)
学习交流群：63181865，欢迎加入一起学习。