关于图片上传时选择图片以后生成图片预览

Posted 2021-01-22 laiangnaduo

实现选择图片之后生成预览图

<script type="text/javascript">
    //下面用于多图片上传预览功能
    function setImagePreviews() {
        //获取选择图片的对象
        var docObj = document.getElementById("filesid");
        //后期显示图片区域的对象
        var dd = document.getElementById("dd");
        dd.innerhtml = "";
        //得到所有的图片文件
        var fileList = docObj.files;
        var patn = /.jpg$|.png$|.jpeg$|.gif$/i;
        //图片张数判断
        if (fileList.length>6) {  
            alert("不要超过6张");
            clearInputFile(docObj);//清空file
        }
        //图片格式的判断
        if(!patn.test(docObj.value)){
                alert("请重新选择,注意格式");
                clearInputFile(docObj);
            }
        //循环遍历
        for (var i = 0; i < fileList.length; i++) {    
            //动态添加html元素        
            dd.innerHTML += "<div style=‘float:left‘ > <img id=‘img" + i + "‘  /> </div>";
            //获取图片imgi的对象
            var imgObjPreview = document.getElementById("img"+i); 

            if (docObj.files && docObj.files[i]) {
                //火狐下，直接设img属性
                imgObjPreview.style.display = ‘block‘;
                imgObjPreview.style.width = ‘120px‘;
                imgObjPreview.style.height = ‘90px‘;
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);   //获取上传图片文件的物理路径
            }
            else {
                //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                //alert(imgSrc)
                var localImagId = document.getElementById("img" + i);
               //必须设置初始大小
                localImagId.style.width = "120px";
                localImagId.style.height = "90px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                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();
            }
        }  
        return true;
    }

    //清空form，赋值一个空的按钮 
    function clearInputFile(f){  
    if(f.value){  
        try{  
            f.value = ‘‘; //for IE11, latest Chrome/Firefox/Opera...  
        }catch(err){  
        }  
        if(f.value){ //for IE5 ~ IE10  
            var form = document.createElement(‘form‘), ref = f.nextSibling, p = f.parentNode;  
            form.appendChild(f);  
            form.reset();  
            p.insertBefore(f,ref);  
        }  
    }  
}  

</script>