美文网首页
JS实现添加相册图片

JS实现添加相册图片

作者: 请叫我果爸 | 来源:发表于2018-08-15 16:09 被阅读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 + "' 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>
    

    相关文章

      网友评论

          本文标题:JS实现添加相册图片

          本文链接:https://www.haomeiwen.com/subject/gxuwbftx.html