上传图片显示缩略图，可上传多张

最新推荐文章于 2021-07-10 10:01:47 发布

David_黎

最新推荐文章于 2021-07-10 10:01:47 发布

阅读量1k

点赞数

分类专栏： HTML 文章标签：上传图片显示缩略图图片上传 html

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

上传图片显示缩略图，可上传多张：

HTML代码部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>By：DragonDean</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
        <td align="center" style="padding-top:10px;">
            <div id="uploadImage">
                <label for="pic-th"><img id="pic-th-preview" src="image/addPhoto.png"/></label>
                <input type="file" name="pic-th" id="pic-th" style="width:150px; display: none;" οnchange="setImagePreview('pic-th','pic-th-preview');"/>
            </div>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

Javascript代码部分：

<script type="text/javascript">
        //下面用于图片上传预览功能
        fileindex=1;
        function setImagePreview(id, oid) {
            var docObj = document.getElementById(id);

            var imgObjPreview = document.getElementById(oid);
            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;
                var localImagId = document.getElementById("localImag");
                //必须设置初始大小
                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();
            }
            if ($("#" + oid).attr("data")) {
                return;
            } else {
                $("#" + oid).attr("data", 'y');
            }
            htmls = '<label  for="pic-th' + fileindex + '"><img src="addPhoto.png"  id="pic-th' + fileindex + '-preview"/></label> <input type="file" id="pic-th' + fileindex + '" name="pic-th' + fileindex + '" style="display: none;" οnchange=setImagePreview("pic-th' + fileindex + '","pic-th' + fileindex + '-preview")>';
            $("#uploadImage").append(htmls);
            fileindex = fileindex + 1;
            return true;
        }

    </script>

上传按钮图：

David_黎

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
上传图片显示缩略图，可上传多张

上传图片显示缩略图，可上传多张：HTML代码部分：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> By：DragonDean
复制链接

扫一扫