前端图片上传前预览

<!DOCTYPE html>
<html>
<head>
    <title>图片上传预览</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function() {
        $("#file_upload").change(function() {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#preview");
            if(fileObj && fileObj.files && fileObj.files[0]){
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr(‘src‘,dataURL);
            }else{
                dataURL = $file.val();
                // $img.css("filter",‘progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src="‘ + dataURL + ‘")‘);
                // 或var imgObj = document.getElementById("preview");
                // imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\"" + dataURL + "\")";
                var imgObj = document.getElementById("preview");
                // 两个坑:
                // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
                // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
        });
    });
    </script>
</head>
<body>
<div id="demo">
    <input id="file_upload" type="file" />
    <div class="image_container">
        <img id="preview" style="width: 300px;height: 300px;">
    </div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>图片上传预览</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    function checkType(upload){
        var image = document.getElementById(upload).value;
        var extStart = image.lastIndexOf(".");
        var ext = image.substring(extStart, image.length).toUpperCase();
        if ( ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
            alert("图片限于png,gif,jpeg,jpg格式!");
            return false;
        }
        return true;
    }
    function setImagePreview(upload,preview) {
        if(checkType(upload)){
            var docObj=document.getElementById(upload);
            var imgObjPreview=document.getElementById(preview);
                imgObjPreview.style.display = ‘block‘;
                imgObjPreview.style.width = ‘160px‘;
                imgObjPreview.style.height = ‘120px‘;
            if(docObj.files && docObj.files[0]){
                try{
                    imgObjPreview.src = docObj.files[0].getAsDataURL();
                }catch(e){
                    //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要以下方式
                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
                }
            }else{
                //IE下,使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                //图片异常的捕捉,防止用户修改后缀来伪造图片
                try{
                    imgObjPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    imgObjPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                }catch(e){
                    alert("您上传的图片格式不正确,请重新选择!");
                    return false;
                }
                document.selection.empty();
            }
            return true;
        }
    }
    </script>
</head>
<body>
<div id="demo">
    <input id="file_upload" type="file" onchange="setImagePreview(‘file_upload‘,‘preview‘)" />
    <div class="image_container">
        <img id="preview">
    </div>
</div>
</body>
</html>
时间: 2024-10-12 06:41:13

前端图片上传前预览的相关文章

html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

[转]html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

input file实现多选,限制文件上传类型,图片上传前预览功能

限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性规定输入字段可选择多个值. 示例: <!-- image/* 所有图片 image/png png图片 image/jpg jpg图片 image/gif gir动图 application/msword Word文档(.doc) application/vnd.openxmlform

HTML5 jQuery图片上传前预览

HTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. <!DOCTYPE html><html> <head> <title>HTML5上传图片预览</title> <meta char

【转】HTML5 jQuery图片上传前预览

hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如 谷歌Chrome和火狐等. <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta h

HTML5 FileReader实现图片上传前预览

如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下:

图片上传前预览的功能

最近自己想做一个项目,涉及到很多图片上传和预览的功能,所以简单记录下: 这里我没有用vue的组件库,是单纯靠input来写出一个图片上传的功能. 思路是:先用input[type=file]来获取本地的图片,然后用HTML5的 File API 的 FileReader 图片本地转成base64格式的url,把这个url赋值到用于预览的src就好了. <div class="upload"> <div class="img-container"&g

基于layUI的图片上传前预览功能的2种实现方式

上传页面采用了layui 的上传模块,要实现的功能:选择文件后---点击文件名,页面中间弹窗内预览图片,先看效果图: 预览功能的实现具体有2种方式:第一种是用blob+FileReader,第二种是layUI自带的. 1. 用layUI 自带的参数实现图片预览: layui.use('upload', function(){ ... choose: function(obj){ var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

图片上传前预览,两种方式可实现

表单提交,前端html: <img id="avatar" style="width: 220px;height: 230px;" alt="image" src="__AVATAR__/boy.png"/> <input id="image" name="image" type="file" style="display: none&qu