自己寫的圖片上傳_ajax上傳(增強版)
阿新 • • 發佈:2019-01-24
效果圖:
效果圖一(未上傳之前和刪除之後)
效果圖二(圖片上傳中)
效果圖三(圖片上傳後)
效果圖四(雙擊圖片時,彈出確認框,火狐下的效果)
效果圖五(圖片刪除成功)
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的朋友可以給我留言!