JS实现添加相册图片

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

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

<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 + "' onclick='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' onclick='javascript:openPhoto()' src='tianjia.jpg'/> </div>
    </div>
</div>
<input type="file"  name="file" id="doc"  style="visibility: hidden;" onchange="javascript:setImagePreviews();" accept="image/*" />
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 180,516评论 25赞 708
  • 导读 离开折颜眼皮底下,麻辣女天师得干点啥证明一下自己本事不小,是不是? 正文 南海拜观音 出了洗梧宫,没走几步,...
    我是那抹清香阅读 591评论 2赞 2
  • 十几年前,我曾经和一个帅哥约定要去南京梅花山看梅花,并赋了个美好的名字“踏雪寻梅” ,借一语双关之意。 ...
    青梅3煮酒阅读 379评论 0赞 1
  • 是这样, 看见论坛几个坚持炒股,而家里又不同意,才发出的感慨 很多时候,一个人没有自制力和反省力,就会埋怨别人,觉...
    爱吃番茄great阅读 223评论 0赞 0
  • “你之所以开始减肥,本质原因一定是对自己的现状不满意,这是很自然的。但是减肥过程中,有的人在意的是过去那个不完美的...
    6f2ecf2de665阅读 222评论 0赞 0

友情链接更多精彩内容