jq實現上傳圖片預覽以及提交前更換/刪除圖片
css部分自行解決吧，我就不多寫了
一：html部分：
<div class="">
<ul class="hyxc" id="userphotos">
<li class='photos' onmouseover='showdelete(this);' onmouseout='hidedelete(this);'><a href='javascript:void(0);'><img src='assets/img/addpic.png' id='img1' onclick='choisepic(1);'/></a>
<div style='display:none'>
<input type='file' name='pic[]' id='pic1' onchange='dealpic(1, this)'/>
</div>
</li>
</ul>
</div>
二：js部分：
<script>
function choisepic(id) {
$("#pic" + id).trigger("click");
}
//刪除照片
//顯示刪除按鈕
function showdelete(that) {
if ($(that).find('a img').attr('src') != 'assets/img/addpic.png') {
$(that).find(".delete").show();
}
}
// 隱藏刪除按鈕
function hidedelete(that) {
$(that).find(".delete").hide();
}
// 刪除照片
function deletelinshi(id) {
var total = $("#userphotos li").length;
$('#userphotos li').each(function () {
if ($(this).find('a img').attr('src') == 'assets/img/addpic.png') {
total = total - 1;
}
});
if (total >= 5) {
$('#img' + id).parent().parent().remove();
// $("#img"+id).attr('src','assets/img/addpic.png');
// $("#pic" + id).val("");
var num = $("#userphotos li:last-child").find("a img").attr('id').replace('img', '');
var i = Number(num) + 1;
ah = "<li class='photos' onmouseover='showdelete(this);' onmouseout='hidedelete(this);'><a href='javascript:void(0);'><img src='assets/img/addpic.png' id='img" + i + "' onclick='choisepic(" + i + ");'/></a><div style='display:none'><input type='file' name='pic[]' id='pic" + i + "' onchange='dealpic(" + i + ",this)'/></div></li>";
$("#userphotos").append(ah);
} else {
$('#img' + id).parent().parent().remove();
}
}
function deletepic(id, img) {
var mymessage = confirm("是否真要刪除本張照片？");
if (mymessage == false) {
return false;
}
$.post("<?= BASE_URI ?>/user/deletepic", {img: img}, function (json) {
if (json == '1') {
$.post("<?= BASE_URI ?>/user/getpics", {id: id}, function (json) {
if (json != '') {
var result = json.split("+|+");
$("#userphotos").html('');
var s = 0;
for (var i = 1, len = result.length; i <= len + 1; i++) {
if (i == (len + 1)) {
result[s] = "/assets/admin/images/addpic.png";
var ah = "<li class='photos' onmouseover='showdelete(this);' onmouseout='hidedelete(this);'><a href='javascript:void(0);'><img src='" + result[s] + "' id='img" + i + "' onclick='choisepic(" + i + ")' /></a><div style='display:none'><input type='file' onchange='dealpic(" + i + ",this)'name='pic[]' id='pic" + i + "'/></div></li>";
} else {
var ah = "<li class='photos' onmouseover='showdelete(this);' onmouseout='hidedelete(this);'><a href='javascript:void(0);'><img src='" + result[s] + "' id='img" + i + "' onclick='choisepic(" + i + ")' /></a><img src='/assets/admin/images/iconDelete.png' class='delete' onclick='deletepic(" + id + ",\"" + result[s] + "\")'/><div style='display:none'><input type='file' onchange='dealpic(" + i + ",this)'name='pic[]' id='pic" + i + "'/></div></li>";
}
window.parent.$("#userphotos").append(ah);
s++;
if (i >= 5) {
break;
}
}
} else {
$("#userphotos").html("<li class='photos' onmouseover='showdelete(this);' onmouseout='hidedelete(this);'><a href='javascript:void(0);'><img src='assets/img/addpic.png' id='img1' onclick='choisepic(1);'/></a><div style='display:none'><input type='file' name='pic[]' id='pic1' onchange='dealpic(1,this)'/></div> </li>");
}
});
}
});
}
//刪除照片結束
function dealpic(id, p) {
var filepath = $("#pic" + id).val();
var extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length).toUpperCase();
if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
alert("圖片限於bmp,png,gif,jpeg,jpg格式");
$("#pic" + id).val('');
return false;
}
var file_size = 0;
file_size = p.files[0].size;
var size = file_size / 1024;
if (size > 1024) {
alert("上傳的圖片大小不能超過1M！");
$("#pic" + id).val('');
return false;
}
var $file = $("#pic" + id);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#img" + id);
var imgold = $("#img" + id).attr('src');
if (fileObj && fileObj.files && fileObj.files[0]) {
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src', dataURL);
$img.after("<img src='assets/img/iconDelete.png' class='delete' onclick='deletelinshi(" + id + ")'/>");
} else {
dataURL = $file.val();
var imgObj = document.getElementById("pic" + id);
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
//$('#img'+id).removeAttr("onclick");//移除事件
var total = $("#userphotos li").length;
if (imgold == 'assets/img/addpic.png' && total < 5) {
var idd = id + 1;
var ah = "<li class='photos' onmouseover='showdelete(this);' onmouseout='hidedelete(this);'><a href='javascript:void(0);'><img src='assets/img/addpic.png' id='img" + idd + "' onclick='choisepic(" + idd + ")' /></a><div style='display:none'><input type='file' onchange='dealpic(" + idd + ",this)'name='pic[]' id='pic" + idd + "'/></div></li>";
$("#userphotos").append(ah);
}
}
</script>
另外再寫一個點選連結下載圖片的功能
<div>
<img id="xmTanShowImg" src=""/>
<h1><a href="javascript:void()" download="girl.jpg" id="xmTanDownload">點此下載</a></h1>
</div>
<script type="text/javascript">
var imgData = "assets/img//1.png";
$("#xmTanShowImg").attr("src", imgData); //給圖片標籤設定src
$("#xmTanDownload").attr("href", imgData); //給a標籤設定href
</script>