精华内容
下载资源
问答
  • 这是一个上传图片之前的预览显示demo
    

    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>//引用了jquery

    <script type="text/javascript">

    $("#image").change(function(){//绑定input选择事件
       var blob=new Blob(this.files,{"type":"image/jpg"});//创建blob对象,第一个参数是file input中的files数组对象,第二个参数是数据类型,可以百度mime类型
       var url=window.URL.createObjectURL(blob);//通过blob对象创建一个url对象,然后这个url对象就可以直接赋值给<img>的src属性了
       console.log(blob);
       console.log(window.URL.createObjectURL(blob));
       console.log(this.files[0]);
       $("#img1").prop("src",url);//给图片的src属性赋值
      });
     });

    </script>

    </head>

    <body>
     <input id="image" type="file" value="选择图片">
     <img id="img1" alt="展示图片1" src="" width="200px">//这儿设置了图片的宽度,如果不设置就会按照图片原本的大小来显示
     <img id="img2" alt="展示图片2" src="" width="300px">
    </body>
    </html>


    以上就是我的demo代码,

    本来看到一个文件上传,然后看了半天没有看明白,于是一顿百度之,经过各种,终于发现了有一个Blob这个东西



    参考文章:

    http://blog.cncnc.com.cn/post/20100519925.html

    http://www.cnblogs.com/jscode/archive/2013/04/27/3572239.html

    展开全文
  • 本篇分别介绍,用Hbuilder打包的app拍摄图片并预览网页上传图片预览两种方式 如何上传图片到服务器 依赖:JQuery Hbuilder App 拍摄图片并预览 html模块: &lt;div style="background-color: ...

    本篇分别介绍,用Hbuilder打包的app拍摄图片并预览和网页上传图片并预览两种方式

    如何上传图片到服务器

    依赖:JQuery

    • Hbuilder App 拍摄图片并预览
    html模块:
    
    <div style="background-color: cadetblue;height: 100px;width: 100px" onclick="captureImage"></div>
    <img src="" id=photo>
    
    js模块:
    function captureImage() {
      
        // 扩展API加载完毕,现在可以正常调用扩展API
        function onPlusReady() {
            console.log("plusready");
        }
    
        // 扩展API加载完毕后调用onPlusReady回调函数
        document.addEventListener("plusready", onPlusReady, false);
    
        var cmr = plus.camera.getCamera(); // 获取手机摄像头使用权限
        // 分别获取手机允许的照片像素和清晰度
        var res = cmr.supportedImageResolutions[0];
        var fmt = cmr.supportedImageFormats[0];
        console.log("Resolution: " + res + ", Format: " + fmt);
        cmr.captureImage(function (path) {
        
                // 通过文件路由获取图片文件
                plus.io.resolveLocalFileSystemURL(path, function (entry) {
                
                	// 获取文件对象成功时执行的方法 
                    entry.file(function (file) {
                        var fileReader = new plus.io.FileReader(); 
                        fileReader.readAsDataURL(file, 'utf-8'); // 把读取到的文件用url的形式进行编码,默认utf-8
                        // 图片读取完成后触发
                        fileReader.onloadend = function (evt) {
                            var img_base64 = evt.target.result
                            // 直接给img赋值base64,就能直接在网页上查看图片
                            // 只能用原生js获取对象
                            var photo = document.getElementById('photo')
                            photo.src = img_base64
                        }
                    });
                }, function (e) {
                	// 获取文件对象失败执行
                });
            },
            function (error) {
                // 拍摄照片失败失败执行
            },
            {resolution: res, format: fmt} // 传入照片的清晰度和像素
        );
    
    }
    
    • 网页上传图片文件并预览
    html模块
    
    <input type="file" id="file" multiple accept="image/*"/>
    <img src="" id=photo>
    
    js模块
    
    $("#file").change(function () {
            if (this.files && this.files[0]) {
                var objUrl = getObjectURL(this.files[0]);
                // console.log("objUrl = " + objUrl);
                blobToDataURL(this.files[0], function (result) {
                });
    
                if (objUrl) {
                    $("#photo").attr("src", objUrl);
                    $("#file").click(function (e) {
                        $("#img").attr("src", objUrl);
                    });
                } else {
                    //IE下,使用滤镜
                    this.select();
                    var imgSrc = document.selection.createRange().text;
                    var localImagId = document.getElementById("uploadimg");
                    //图片异常的捕捉,防止用户修改后缀来伪造图片
                    try {
                        preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
                    } catch (e) {
                        this._error("filter error");
                        return;
                    }
                    this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + data + "\")";
                }
            }
        });
    
    
        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    
    // blob转base64
    function blobToDataURL(blob, callback) {
        var a = new FileReader();
        a.onload = function (e) {
            callback(e.target.result);
        };
        a.readAsDataURL(blob);
    }
    
    展开全文
  • 登录       section{ border-bottom:1px solid red; margin-top:20px; } #div{ height:200px; width:200px; border:1px solid #eee; } ...
    <!doctype html>
    
    <html lang="zh-CN" class="h100">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta http-equiv="Cache-Control" content="no-cache">
        <script src="./jquery.js"></script>
        <title>登录</title>
    </head>
    <body style="background:#F7F7F7" class="h100">


    <section>
    <input type="file"></input> 
    <div id="div">
    <img />
    </div>
    </section>
    <section>
    <input type="file"></input> 
    <div id="div">
    <img />
    </div>
    </section>
    <section>
    <input type="file"></input> 
    <div id="div">
    <img />
    </div>
    </section>
    <style>
    section{
    border-bottom:1px solid red;
    margin-top:20px;
    }
    #div{
    height:200px;
    width:200px;
    border:1px solid #eee;
    }
    #div img{
    width:100%;
    height:100%;
    }
    </style>
    <script>
    $(function(){
    $("input").change(function(evt){
    var reader = new FileReader();
    var that = $(this);
    var _src;
    reader.onload = function(e){
    _src = e.target.result;
    console.log(_src);
    that.siblings("div").children("img").attr("src",_src);
    }

    reader.readAsDataURL(this.files[0]);
    })
    })
    </script>
    </body>
    </html>
    展开全文
  • //图片上传预览 IE是用了滤镜。 function previewImage(file,img_b) { var MAXWIDTH = 130; var MAXHEIGHT = 130; var div = document.getElementById(img_b); if (file.files && file.files[0]) { div....

    【实现效果】


    【相关代码】

    【HTML】

    <div id="preview">
    	<div class="single_pic" id="img_b1"> </div>
        <input class="hidden_input" type="file" οnchange="previewImage(this,'img_b1')" />
    	<div class="single_pic" id="img_b2"></div>
        <input class="hidden_input" type="file" οnchange="previewImage(this,'img_b2')" />
    	<div class="single_pic" id="img_b3"></div>
        <input class="hidden_input" type="file" οnchange="previewImage(this,'img_b3')" />
    </div>   

    【CSS】

    *{
    	margin:0px auto;
    	padding:0px;
    }
    #preview{
    	width:600px;
    	height:300px; 
    	background-color:#ccc;
    	overflow:hidden;
    }
    .single_pic{
    	width:130px;
    	height:130px;
    	overflow:hidden; 
    	background:#fff;
    	float:left;
    	margin:20px 0 0 20px;
    }
    .hidden_input{
    	position:relative; 
    	height:130px; 
    	width:130px; 
    	float:left;
    	margin:20px 0 0 -130px; 
    	background:#eee; 
    	opacity:0;
    }

    【JS】

     //图片上传预览    IE是用了滤镜。
            function previewImage(file,img_b)
            {
              var MAXWIDTH  = 130; 
              var MAXHEIGHT = 130;
              var div = document.getElementById(img_b);
              if (file.files && file.files[0])
              {
                  div.innerHTML ='<img id='+img_b+'_img>';
                  var img = document.getElementById(img_b+'_img');
                  img.onload = function(){
                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                    img.width  =  rect.width;
                    img.height =  rect.height;
                    img.style.marginLeft = rect.left+'px';
                    img.style.marginTop =  rect.top+'px';
                  }
                  var reader = new FileReader();
                  reader.onload = function(evt){img.src = evt.target.result;}
                  reader.readAsDataURL(file.files[0]);
              }
              else //兼容IE
              {
                var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                file.select();
                var src = document.selection.createRange().text;
                div.innerHTML = '<img id='+img_b+'_img>';
                var img = document.getElementById(img_b+'_img');
                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
                div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
              }
            }
            function clacImgZoomParam( maxWidth, maxHeight, width, height ){
                var param = {top:0, left:0, width:width, height:height};
                if( true )
                {
                    rateWidth = width / maxWidth;
                    rateHeight = height / maxHeight;
                     
                    if( rateWidth > rateHeight )
                    {
                        param.width = Math.round(width / rateHeight);
                        param.height = maxHeight;
                    }else
                    {
                        param.width =  maxWidth;
                        param.height = Math.round(height / rateWidth);
                    }
                }
                 
                param.left = Math.round((maxWidth - param.width) / 2);
                param.top = Math.round((maxHeight - param.height) / 2);
                return param;
            }


    展开全文
  • PHP上传图片预览功能、控制图片上传大小,可根据自己的需要扩展功能。
  • 原因是如果等到上传完毕之后再返回图片URL给用户预览,一旦网络比较慢,用户就得等好久才能预览,而且每次更换图片都会上传到服务器会产生很多垃圾图,考虑这些,不妨直接在本地预览,既快捷又节省带宽和存储空间。...
  • jquery上传图片预览

    2011-11-27 20:52:05
    一般我们在上传图片后会在网页中出现预览而不保存到数据库,该部分代码就是实现上传图片网页中的显示,让用户确定后在上传
  • 因为浏览器在显示本地路径的图片时有安全漏洞,所以我们已经无法利用img标签的直接显示本地路径下的图片,需要通过"FileReader"和"input:file"标签来完成。  FileReader类型实现的是一种异步...
  • h5上传图片预览

    2019-10-18 09:24:35
    第一次做图片上传,记录一些问题。 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。而网页上的每一个图片,都是需要消耗一个http请求下载而来...
  • 上传图片预览图片方向错误

    千次阅读 2018-02-06 08:32:55
    上传图片预览图片方向错误 问题描述 ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。 解决方案 获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正。 利用...
  • 注意:要把客户端对本站点设为信任,才能执行该脚本预览图片。  document.getElementById("Image1").src = document.getElementById("FileUpload1").value;  }   ();"/>  AlternateText="没选图片"/> 转载...
  • 文件上传预览

    2018-01-19 12:04:52
    html网页上传图片前,在页面对图片进行预览,大小可调
  • 主要介绍了vue.js图片转Base64上传图片预览的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 点击"+"按钮,选择一张图片(jpg、png、bmp、jpeg格式),添加到网页中实现预览,效果如图:  2.点击图片,放大图片至屏幕中间,实现放大预览,再次点击回到原来的大小,效果如图: 实现:  导入 lrz...
  • content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">ajax Upload demouploadshow$('#upload').click(upload);$('#file').change(function(){var reader ...
  • 本文实例讲述了jQuery+HTML5实现图片上传预览效果。分享给大家供大家参考。具体如下:这里主要是使用HTML5 的File API,建立一??可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,...
  • web开发离不开图片上传功能,但是应该先实现图片在选择后的预览功能,然后才是上传功能。网上的文件上传插件很多很多,但是我发现大部分不带预览功能,即使带了预览功能,又强制和上传功能绑定在一起,那么如果我只...
  • js 上传图片预览问题

    2020-10-28 19:07:19
    我们写网页的时候一般的用IE进行开发,一般的人都是按照IE进行些程序,做网站的时候遇到浏览器兼容问题是非常烦躁的事情。
  • 图片上传预览

    2013-05-24 15:23:36
    完美兼容IE ,火狐 和其他浏览器的 图片上传预览的源码。有注释,便于学习。
  • 介绍一下如何用input标签实现图片上传和在网页上实现图片预览,使用canvas的toDataURL()方法进行压缩以及把base64转化成二进制文件数据进行上传
  • 最近学前端的时候,有个搭建网站的学习任务。其中就有一个功能要实现:可以从本地上传图片网页,并在本地实现预览。 查了很多资料,最后终于找到一种比较简单的实现方法。 ...
  • js上传图片预览

    2019-09-17 12:17:10
    网页中经验要上传图片,那么预览的时候是需要把图片转换成base64,以下是函数 <input onclick="upload" type="file"> <img id="img" src=""> function upload(e) { //获取并记录图片的base64编码 ...
  • 上传图片预览问题

    2019-10-06 10:30:57
    最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现IE8和火狐不能显示,弄了很久,早上终于解决了很高兴。故跟大家分享下,我也多是网上找的,自己总结的一下,希望对大家有点帮助。  我们一般根据...
  • 为什么80%的码农都做不了架构师?>>> ...
  • 利用HTML5的getObjectURL获取图片路径实现本地预览上传图片,类似于点击现有头像上传,更改图片为新头像那种。
  • 说起各大网站的用户中心功能,其中就少不了用户头像...用html的file标签就能实现图片上传预览,原理就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串...
  • 本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图
  • 插件描述:多图片上传预览,已测试ie 360 火狐 谷歌浏览器更新时间:2020-09-07 06:31:55更新说明:调整样式,去除高度固定,使图片预览不变形。更新时间:2014-11-08 06:37:08简单的前端多图上传预览,没有后台代码...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,273
精华内容 4,909
关键字:

网页上传图片无法预览