图片预览

guomingzhang2008

浏览: 162267 次
性别:
来自: 上海

最近访客更多访客>>

旺仔小呆

lifan51777

qq849397558

zo1698

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

图片预览：

上传图片时的预览实现，支持各浏览器。

原理比较简单，下面是简单的代码实现：

<!--
  Created by IntelliJ IDEA.
  User: 张国明 guomingzhang2008@gmail.com
  Date: 12-11-26
  Time: 15:08:36
  个人头像上传
-->
<html>
<head>
    <meta content="text/html" charset="utf-8">
    <title>本地图片预览</title>
<head>
    <script src="jquery1.7.min.js"></script>

    <script type="text/javascript">
        /**
         * 本地预览
         * @param inputFile 读入的文件对象
         */
        function readURL(inputFile) {
            var Browser_Name = navigator.appName;
            var is_IE = (Browser_Name == "Microsoft Internet Explorer");//判读是否为ie浏览器

            if (is_IE) {
                // IE浏览器 直接获取文件的路径值
                $("#preViewImg").attr("src", "file:///" + $("#file").val());
            } else {
                // 非IE浏览器 使用HTML5的方式获取文件浏览框中的文件
                if (inputFile.files && inputFile.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#preViewImg').attr('src', e.target.result);
                    };
                    reader.readAsDataURL(inputFile.files[0]);
                }
            }
        }

        /**
         * 上传时的验证
         */
        function uploadValidate() {
            if ($('#file').val() == "") {
                alert("请选择您要上传的图片！");
                return;
            }
            //校验文件格式
            if(!/^.*?\.(jpg|JPG)$/.test($("#file").val().toLowerCase())){
                alert("只能上传jpg、JPG格式的文件！");
                return;
            }
			alert("提交成功");
        }
    </script>
</head>
<body>

	<div style="margin-left: 80px; width: 100px; height: 123px; padding: 2px; background-color: #dfdfdf; border: 1px solid #f0f0f0;">
		<!-- 预览图片，这里将图片的大小设置成固定的了。 -->
		<img id="preViewImg" width="99" height="122" src="no_pic.png">
	</div>
	<div style="margin-left: 70px; font-size: 12px;">(建议尺寸 100 * 120)</div>

	<form id="editForm" method="post" action="" enctype="multipart/form-data">
		<input id="file" type="file" name="file" onchange="readURL(this);"/>
		<input type="button" value="上传" onclick="uploadValidate();">
	</form>

</body>
</html>

viewPic.rar (33.5 KB)
下载次数: 19

分享到：