自己寫的圖片上傳_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，歡迎加入一起學習。