自己写的图片上传_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，欢迎加入一起学习。