js实现添加相册图片

来源：互联网发布：软件商店oppo版本编辑：程序博客网时间：2024/05/22 00:27

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

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

<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>

0 0