js实现添加相册图片

最新推荐文章于 2023-02-08 21:29:20 发布

请叫我果爸

最新推荐文章于 2023-02-08 21:29:20 发布

阅读量836

点赞数

分类专栏： JavaScrip 文章标签： javascript

本文链接：https://blog.csdn.net/qq_25280063/article/details/53032783

版权

JavaScrip 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

现在评价除了写一些内容之外，还会进行一些星级评价，上传照片等。

我拿着网上的一些代码，并进行了一些修改，有需要的朋友可以参考一下。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<title>测试页面</title>
<script type="text/javascript">
    window.onload = function(){
        docObj = document.getElementById("doc");
    }
    var docObj;
    var FileCount=0;//上传文件总数
    
    //下面用于图片上传预览功能
    function setImagePreviews() {
        var dd = document.getElementById("dd");
        var fileList = docObj.files;
        var imgObjPreview = document.getElementById("img"+FileCount); 
        if (docObj.files && docObj.files[0]) {
            //火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '150px';
            imgObjPreview.style.height = '180px';
            //imgObjPreview.src = docObj.files[0].getAsDataURL();
            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        } else {
            //IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            alert(imgSrc)
            var localImagId = document.getElementById("img" + FileCount);
            //必须设置初始大小
            localImagId.style.width = "150px";
            localImagId.style.height = "180px";
            //图片异常的捕捉，防止用户修改后缀来伪造图片
            try {
                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            } catch (e) {
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }

        FileCount++;
        if (FileCount < 5) {
            dd.innerHTML+="<div style='width:150px;height:180px;float:left;text-align:center;' > <img id='img" + FileCount + "' οnclick='javascript:openPhoto()' src='tianjia.jpg' /> </div>";
        };
        return true;
    }

    function openPhoto() {
        docObj.click();
    }
</script>
</head>
<body>
<div style="margin :0px auto; width:990px;"> 
    <div id="dd" style="width:100%;">
        <div style='width:150px;height:180px;float:left;text-align:center;' > <img id='img0' οnclick='javascript:openPhoto()' src='tianjia.jpg'/> </div>
    </div>
</div>
<input type="file"  name="file" id="doc"  style="visibility: hidden;" οnchange="javascript:setImagePreviews();" accept="image/*" />
</body>
</html>

请叫我果爸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现添加相册图片

现在评价除了写一些内容之外，还会进行一些星级评价，上传照片等。我拿着网上的一些代码，并进行了一些修改，有需要的朋友可以参考一下。测试页面 window.onload = function(){ docObj = document.getElementById("doc"); } var docObj; var FileCount=0;
复制链接

扫一扫

专栏目录