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

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值