上篇回顾请看: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,欢迎加入一起学习。