您当前位置:首页 > 文章中心 > SCSCMS

上传前预览图片

稿件来源: mozilla   撰稿作者: 匿名   发表日期: 2016-04-22   阅读次数: 29   查看权限: 游客查看

上传前预览图片

<!doctype html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <title>Image preview example</title>
    <script type="text/javascript">
        var loadImageFile = (function () {
            if (window.FileReader) {
                var	oPreviewImg = null, oFReader = new window.FileReader(),
                        rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
                oFReader.onload = function (oFREvent) {
                    if (!oPreviewImg) {
                        var newPreview = document.getElementById("imagePreview");
                        oPreviewImg = new Image();
                        oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
                        oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
                        newPreview.appendChild(oPreviewImg);
                    }
                    oPreviewImg.src = oFREvent.target.result;
                };

                return function () {
                    var aFiles = document.getElementById("imageInput").files;
                    if (aFiles.length === 0) { return; }
                    if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
                    oFReader.readAsDataURL(aFiles[0]);
                }

            }
            if (navigator.appName === "Microsoft Internet Explorer") {
                return function () {
                    document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;
                }
            }
        })();
    </script>
    <style type="text/css">
        #imagePreview {
            width: 160px;
            height: 120px;
            float: right;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
        }
    </style>
</head>

<body>
<div id="imagePreview"></div>

<form name="uploadForm">
    <p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
        <input type="submit" value="Send" /></p>
</form>
</body>
</html>

 

相关阅读: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

关键词: 上传,预览图片   编辑时间: 2016-04-22 14:02:36

  • 感到高兴

    8

    高兴
  • 感到支持

    8

    支持
  • 感到搞笑

    8

    搞笑
  • 感到不解

    8

    不解
  • 感到谎言

    8

    谎言
  • 感到枪稿

    8

    枪稿
  • 感到震惊

    8

    震惊
  • 感到无奈

    8

    无奈
  • 感到无聊

    8

    无聊
  • 感到反对

    8

    反对
  • 感到愤怒

    8

    愤怒
50%(8)
50%(8)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程