jq实现上传图片预览以及提交前更换/删除图片

以你之姓@ 2022-05-17 00:17 201阅读 0赞

css部分自行解决吧，我就不多写了

一：html部分：

二：js部分：

//删除照片  
    //显示删除按钮  
    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' οnmοuseοver='showdelete(this);' οnmοuseοut='hidedelete(this);'><a href='javascript:void(0);'><img src='assets/img/addpic.png' id='img" + i + "' οnclick='choisepic(" + i + ");'/></a><div style='display:none'><input type='file' name='pic\[\]' id='pic" + i + "' οnchange='dealpic(" + i + ",this)'/></div></li>";  
            $("\#userphotos").append(ah);  
        \} else \{  
            $('\#img' + id).parent().parent().remove();  
        \}  
    \}

//删除照片结束  
    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' οnclick='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' οnmοuseοver='showdelete(this);' οnmοuseοut='hidedelete(this);'><a href='javascript:void(0);'><img src='assets/img/addpic.png' id='img" + idd + "' οnclick='choisepic(" + idd + ")' /></a><div style='display:none'><input type='file' οnchange='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>