精华内容
下载资源
问答
  • js预览图片

    2011-10-22 12:32:15
    js预览图片,使用上传文件控件,选择图片后达到及时预览功能! input type="file" 控件预览图片 该功能使用滤镜及时预览图片!现在问题是不支持IE6!
  • js预览图片兼容ie6,7,8,火狐等浏览器
  • js预览图片效果

    2017-03-27 10:43:55
    左右图片切换并可放大图片预览滚动的效果
  • JS选择图片(单图/多图)然后预览图片的总结 JQ使用 FormData 上传图片报错 jquery-3.1.1.min.js:4 Uncaught (in promise) TypeError: Illegal invocation JQ使用 FormData 上传图片的时候参数显示的不是预期的值...

    JS选择图片(单图/多图)然后预览图片的总结
    JQ使用 FormData 上传图片报错 jquery-3.1.1.min.js:4 Uncaught (in promise) TypeError: Illegal invocation
    JQ使用 FormData 上传图片的时候参数显示的不是预期的值(下面有图)

    JS选择图片预览

    预览单图

    根据上传的图片文件对象,转换为base64,然后赋值到页面上即可渲染

    <input id="upload-file" type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" />
    
    <script>
        var uploadFile = document.getElementById('upload-file')
    
        uploadFile.onchange = function(e) {
            previewFile(e.target.files[0]).then(res => {
                console.log(res) // base64图片
            })
        }
    
        /*
         * 将file对象转化为base64编码
         * file  目标file对象
         */
        function previewFile(file) {
            return new Promise((resolve, reject) => {
                let reader = {}
                if (file) {
                    // 创建流对象
                    reader = new FileReader()
                    reader.readAsDataURL(file)
                }
                // 捕获 转换完毕
                reader.onload = function(e) {
                    // 转换后的base64就在e.target.result里面,直接放到img标签的src属性即可
                    resolve(e.target.result)
                }
    
                render.onerror = function() {
                    reject({
                        msg: '转换图片失败'
                    })
                }
            })
        }
    </script>
    

    预览多图

    选择多图只需要在input添加一个 multiple 属性
    选择多图后使用Promise.all来控制多图渲染的异步

    <input id="upload-file" type="file" multiple accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" />
    
    <script>
        var uploadFile = document.getElementById('upload-file')
        uploadFile.onchange = function(e) {
            // e.target.files 是一个Object对象,无法直接使用map
            // 所以使用Object.values 获取对象中每一项的值
            // 配合 Promisie.all进行转换图片预览
            Promise.all(Object.values(e.target.files).map(item => previewFile(item))).then(res => {
                console.log(res) // [base64,base64] 转换结果为选择的图片数组
            })
        }
    
        /*
         * 将file对象转化为base64编码
         * file  目标file对象
         */
        function previewFile(file) {
            return new Promise((resolve, reject) => {
                let reader = {}
                if (file) {
                    // 创建流对象
                    reader = new FileReader()
                    reader.readAsDataURL(file)
                }
                // 捕获 转换完毕
                reader.onload = function(e) {
                    // 转换后的base64就在e.target.result里面,直接放到img标签的src属性即可
                    resolve(e.target.result)
                }
            })
        }
    </script>
    

    JS上传文件的坑

    问题1: jquery-3.1.1.min.js:4 Uncaught (in promise) TypeError: Illegal invocation

    附上复现的代码

    // 后端接收的参数名称为 file
    // file 对象为刚才上面选择的 file
    var uploadFile = document.getElementById
    var imgFile = uploadFile.files[0]
    
    let formData = new FormData()
    formData.append("file", imgFile)
    
    $.ajax({
        url: "[要上传的接口路径]",
        type: "POST",
        dataType: "JSON",
        data: formData,
        success: res => {},
        fail: res => {}
    })
    

    问题出在了参数处理的部分,毕竟我们上传的是二进制流文件,所以我们要告诉JQ,不要转换我们的参数,让他保持为二进制格式。多加一个 processData:false

    于是代码改成:

    // 后端接收的参数名称为 file
    // file 对象为刚才上面选择的 file
    var uploadFile = document.getElementById
    var imgFile = uploadFile.files[0]
    
    let formData = new FormData()
    formData.append("file", imgFile)
    
    $.ajax({
    
        url: "[要上传的接口路径]",
        type: "POST",
        dataType: "JSON",
        data: formData,
        processData: false, // 增加这一行,不处理参数
        success: res => {},
        fail: res => {}
    })
    

    问题1解决,那很快就会引来问题2

    问题2 上传的时候参数不对

    就像这样

    在这里插入图片描述

    如果参数是这样传过去的,后端是接受不到图片的
    因为JQ自动的帮我们设置了请求头,但是ajax2.0中不需要设置请求头,我们找到contentType,把它的值设为false就能够取消掉这个设置。

    最后代码改成这样

    // 后端接收的参数名称为 file
    // file 对象为刚才上面选择的 file
    var uploadFile = document.getElementById
    var imgFile = uploadFile.files[0]
    
    let formData = new FormData()
    formData.append("file", imgFile)
    
    $.ajax({
    
        url: "[要上传的接口路径]",
        type: "POST",
        dataType: "JSON",
        data: formData,
        contentType: false,
        processData: false, // 增加这一行,不处理参数
        success: res => {},
        fail: res => {}
    })
    

    上传问题解决~

    展开全文
  • 文件上传时,JS预览图片 "file" onclick="changeImage(this)"> "text/javascript"> function changeImage(_this) { var $file = $(_this); var fileObj = $file[0]; var windowU

    文件上传时,JS预览图片

     <input type="file" onclick="changeImage(this)">
    
     <script type="text/javascript">
         function changeImage(_this) {
                var $file = $(_this);
                var fileObj = $file[0];
                var windowURL = window.URL || window.webkitURL;
                var dataURL;
                var $img = $file.siblings('a').find('img');
                if(fileObj && fileObj.files && fileObj.files[0]){
                    dataURL = windowURL.createObjectURL(fileObj.files[0]);
                    $img.attr('src',dataURL);
                }else{
                    dataURL = $file.val();
                    $img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    $img.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
                }
            }
    </script>
    展开全文
  • 1.js预览图片: <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <script type="text/javascript">...

    1.js预览图片:

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <script type="text/javascript">
        function changepic() {
            //document.getElementById("#prompt3").css("display", "none");
            var reads = new FileReader();
            var f = document.getElementById('chosefile').files[0];
            reads.readAsDataURL(f);
            reads.onload = function(event) {
                document.getElementById('showimg').src = this.result;
                // document.getElementById("#img3").css("display", "block");
            };
        }
    </script>
    <body>
    <div>
            <!--当vaule值改变时执行changepic函数,规定上传的文件只能是图片-->
            <input type="file" id="chosefile" style="width: 200px;height: 30px;" onchange="changepic()" accept="image/jpg,image/jpeg,image/png,image/PNG"><br>
            <img src="" id="showimg" style="width: 300px;height: 300px;" />
    </div>
    </body>
    </html>
    

    2.js+h5多图片上传:

     

    参考文章:写的真的很棒====https://blog.csdn.net/huangxin112/article/details/74956462/

     
    <!DOCTYPE html>    
    <html>    
    <head>    
    <meta charset="UTF-8">    
    <title>showImages</title>    
    <style type="text/css">   
        .float{    
            float:left;    
            width : 200px;    
            height: 200px;    
            overflow: hidden;    
            border: 1px solid #CCCCCC;    
            border-radius: 10px;    
            padding: 5px;    
            margin: 5px;    
        }    
        img{    
            position: relative;    
        }    
        .result{    
            width: 200px;    
            height: 200px;    
            text-align: center;    
            box-sizing: border-box;    
        }   
      
      
        #file_input{  
            display: none;  
        }  
      
      
        .delete{  
            width: 200px;  
            height:200px;  
            position: absolute;  
            text-align: center;  
            line-height: 200px;  
            z-index: 10;  
            font-size: 30px;  
            background-color: rgba(255,255,255,0.8);  
            color: #777;  
            opacity: 0;  
            transition-duration: 0.7s;  
            -webkit-transition-duration: 0.7s;   
        }  
      
      
        .delete:hover{  
            cursor: pointer;  
            opacity: 1;  
        }  
      
      
            
    </style>    
        
        
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>    
    <script type="text/javascript">    
        
        
    window.onload = function(){    
        var input = document.getElementById("file_input");    
        var result;    
        var dataArr = []; // 储存所选图片的结果(文件名和base64数据)  
        var fd;  //FormData方式发送请求    
        var oSelect = document.getElementById("select");  
        var oAdd = document.getElementById("add");  
        var oSubmit = document.getElementById("submit");  
        var oInput = document.getElementById("file_input");  
         
        if(typeof FileReader==='undefined'){    
            alert("抱歉,你的浏览器不支持 FileReader");    
            input.setAttribute('disabled','disabled');    
        }else{    
            input.addEventListener('change',readFile,false);    
        }     //handler    
        
            
        function readFile(){   
            fd = new FormData();    
            var iLen = this.files.length;  
            for(var i=0;i<iLen;i++){  
                if (!input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)){  //判断上传文件格式    
                    return alert("上传的图片格式不正确,请重新选择");    
                }  
                var reader = new FileReader();  
                fd.append(i,this.files[i]);  
                reader.readAsDataURL(this.files[i]);  //转成base64    
                reader.fileName = this.files[i].name;  
      
                reader.onload = function(e){   
                    var imgMsg = {    
                        name : this.fileName,//获取文件名    
                        base64 : this.result   //reader.readAsDataURL方法执行完后,base64数据储存在reader.result里    
    				}   
                    dataArr.push(imgMsg);    
                    result = '<div class="delete">delete</div><div class="result"><img class="subPic" src="'+this.result+'" alt="'+this.fileName+'"/></div>';    
                    var div = document.createElement('div');  
                    div.innerHTML = result;    
                    div['className'] = 'float';  
                    document.getElementsByTagName('body')[0].appendChild(div);    //插入dom树    
                    var img = div.getElementsByTagName('img')[0];  
                    img.onload = function(){    
                        var nowHeight = ReSizePic(this); //设置图片大小    
                        this.parentNode.style.display = 'block';    
                        var oParent = this.parentNode;    
                        if(nowHeight){    
                            oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px';    
                        }    
                    }   
                    div.onclick = function(){  
                        $(this).remove();                  // 在页面中删除该图片元素  
                    }  
                }    
            }    
        }    
            
            
        function send(){   
            var submitArr = [];  
            $('.subPic').each(function () {
                    submitArr.push({
                        name: $(this).attr('alt'),
                        base64: $(this).attr('src')
                    });  
                }
            );
            $.ajax({    
                url : 'http://123.206.89.242:9999',    
                type : 'post', 
                data : JSON.stringify(submitArr),    
                dataType: 'json',    
                //processData: false,   用FormData传fd时需有这两项    
                //contentType: false,    
                success : function(data){    
                    console.log('返回的数据:'+JSON.stringify(data))    
               }
            })    
        }    
            
         
      
      
        oSelect.onclick=function(){   
            oInput.value = "";   // 先将oInput值清空,否则选择图片与上次相同时change事件不会触发  
            //清空已选图片  
            $('.float').remove();        
            oInput.click();   
        }   
      
      
        oAdd.onclick=function(){  
            oInput.value = "";   // 先将oInput值清空,否则选择图片与上次相同时change事件不会触发  
            oInput.click();   
        }   
      
      
        oSubmit.onclick=function(){    
            if(!dataArr.length){    
                return alert('请先选择文件');    
    		}    
            send();    
        }    
    }    
    /*    
     用ajax发送fd参数时要告诉jQuery不要去处理发送的数据,    
     不要去设置Content-Type请求头才可以发送成功,否则会报“Illegal invocation”的错误,    
     也就是非法调用,所以要加上“processData: false,contentType: false,”    
     * */    
        
                    
    function ReSizePic(ThisPic) {    
        var RePicWidth = 200; //这里修改为您想显示的宽度值    
        
        var TrueWidth = ThisPic.width; //图片实际宽度    
        var TrueHeight = ThisPic.height; //图片实际高度    
            
        if(TrueWidth>TrueHeight){    
            //宽大于高    
            var reWidth = RePicWidth;    
            ThisPic.width = reWidth;    
            //垂直居中    
            var nowHeight = TrueHeight * (reWidth/TrueWidth);    
            return nowHeight;  //将图片修改后的高度返回,供垂直居中用    
        }else{    
            //宽小于高    
            var reHeight = RePicWidth;    
            ThisPic.height = reHeight;    
        }    
    }    
     
        
                    
    </script>    
    </head>    
        <body>    
                <div class="container">    
                    <label>请选择一个图像文件:</label>  
                    <button id="select">(重新)选择图片</button>  
                    <button id="add">(追加)图片</button>  
                    <input type="file" id="file_input" multiple/> <!--用input标签并选择type=file,记得带上multiple,不然就只能单选图片了-->    
                    <button id="submit">提交</button>
                </div>    
        </body>    
    </html> 
    

    补充:

    上传图片提交ajax
    如果想把图片信息通过ajax传给后端,则需要通过new FormData() 上传图片信息,然后使用 append() 方法向该对象里添加字段,具体代码如下:

    (注:以下代码在图片预览成功后执行,也就是在reader.readAsDataURL(file); 后)
     

    var formData = new FormData(); 
    formData.append('file', $('#input_file')[0].files[0]);  //添加图片信息的参数  //var c=document.getElementById('limg').files[0]       这里c是二进制blob变量   $('#input_file')[0]是取查到的id为input_file的第一个元素
    formData.append('sizeid',123);  //添加其他参数
    $.ajax({
        url: '/material/uploadFile',
        type: 'POST',
        cache: false, //上传文件不需要缓存
        data: formData,
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        success: function (data) {
            var rs = eval("("+data+")");
            if(rs.state==1){
                tipTopShow('上传成功!');
            }else{
                tipTopShow(rs.msg);
            }
        },
        error: function (data) {
            tipTopShow("上传失败");
        }
    })  

    3.servlet获取h5传来的复选框数据:

    String [] likes=request.getParameterValues("like");

    一般的使用String username=request.getParameter("username");就可以了

    展开全文
  • viewer.js预览图片插件使用

    千次阅读 2019-05-31 14:15:50
    参考学习链接: https://www.jqhtml.com/6750.html 官方文档及其插件下载链接: ...使用步骤: 导入文件,js版,不需要导入其他的了 <link rel="stylesheet" href="${ctx}/plug-in/viwer/css/viewer.min.css...

    参考学习链接:
    https://www.jqhtml.com/6750.html
    官方文档及其插件下载链接:
    https://github.com/fengyuanchen/viewerjs#options
    使用步骤:
    导入文件,js版,不需要导入其他的了

    <link rel="stylesheet" href="${ctx}/plug-in/viwer/css/viewer.min.css">
    <script src="${ctx}/plug-in/viwer/js/viewer.min.js"></script>
    
    <div id="mypic">
      
    </div>
     <script type="text/javascript">
     $(document).ready(function(){
     });
     //单张图片预览
     function picView(id,name){
    	 $("#mypic").empty();//每次进来都清空div
    	 console.log(id)//传入的id
    	 console.log(name)
    	 //动态生成图片标签
    	var pic = "<img id='"+id+"' src='attachmentController.do?picPreview&id="+id+"'alt='"+name+"'>";
    	//追加到div中
    	 $("#mypic").append(pic);
    	//动态加入预览功能中
    	var viewer = new Viewer(document.getElementById(id),{toolbar:{
    	    zoomIn: 4,
    	    zoomOut: 4,
    	    oneToOne: false,
    	    reset: false,
    	    prev: false,
    	    play: {
    	      show: 4,
    	      size: 'large',
    	    },
    	    next: false,
    	    rotateLeft: false,
    	    rotateRight: false,
    	    flipHorizontal: 4,
    	    flipVertical: 4,
    	  },
    	  });
    	//代码触发图片标签的点击功能
        $("#"+id).click();
     }
     
    

    前端小案例
    通过点击按钮触发预览的做法

    <!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>无标题文档</title>
    <link  href="css/viewer.min.css" rel="stylesheet">
    <script src="js/viewer.min.js"></script>
    <style>
    * { margin: 0; padding: 0;}
    #jqhtml { width: 700px; margin: 0 auto; font-size: 0;}
    #jqhtml li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
    #jqhtml li img { width: 100%;}
    </style>
    </head>
    
    <body>
    <h1>默认效果</h1>
    
    <div>
      <img id="image"  src="http://tu.qt3191.com/120512/2010112855795625.jpg" alt="Picture">
       <img id="image2"  src="img/thumbnails/tibet-6.jpg" alt="Picture">
       
       <input type="button" value="展示图片1" onclick="my()"/>
       <input type="button" value="展示图片2" onclick="my2()"/>
    </div>
    <script src="js/viewer.min.js"></script>
    <script type="text/javascript">
    
    
    function my(){
    		console.log("ddd")	
    		var viewer = new Viewer(document.getElementById('image'));
    	document.getElementById('image').click();
    }
    function my2(){
    		console.log("1ddd")	
    		var viewer = new Viewer(document.getElementById('image2'),{toolbar:{
    	    zoomIn: 4,
    	    zoomOut: 4,
    	    oneToOne: false,
    	    reset: false,
    	    prev: false,
    	    play: {
    	      show: 4,
    	      size: 'large',
    	    },
    	    next: false,
    	    rotateLeft: false,
    	    rotateRight: false,
    	    flipHorizontal: 4,
    	    flipVertical: 4,
    	  }
    	  });
    	document.getElementById('image2').click();
    }
    </script>
    
    
    </body>
    </html>
    
    

    效果:
    在这里插入图片描述
    jquery版使用:

    <!DOCTYPE html>
    <html lang="zh-Hans">
    <head>
    <meta charset="utf-8">
    <title>JS/jQuery图片查看器viewer.js演示-jQuery版本</title>
    <link rel="stylesheet" href="css/viewer.min.css">
    <style>
    * { margin: 0; padding: 0;}
    #jqhtml { width: 700px; margin: 0 auto; font-size: 0;}
    #jqhtml li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
    #jqhtml li img { width: 100%;}
    </style>
    </head>
    
    <body>
    <h1>jQuery版本</h1>
    
    <ul id="jqhtml">
    	<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
    	<li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
    	<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
    	<li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>
    	<li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>
    	<li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>
    </ul>
    
    <script src="js/jquery.min.js"></script>
    <script src="js/viewer-jquery.min.js"></script>
    <script>
    $(function() {
    	$('#jqhtml').viewer({
    		url: 'data-original',
    		toolbar:{
    	    zoomIn: 4,
    	    zoomOut: 4,
    	    oneToOne: false,
    	    reset: false,
    	    prev: false,
    	    play: {
    	      show: 4,
    	      size: 'large',
    	    },
    	    next: false,
    	    rotateLeft: false,
    	    rotateRight: false,
    	    flipHorizontal: 4,
    	    flipVertical: 4,
    	  }
    	});
    });
    </script>
    
    

    回调函数:

    <!DOCTYPE html>
    <html lang="zh-Hans">
    <head>
    <meta charset="utf-8">
    <title>JS/jQuery图片查看器viewer.js演示-回调函数</title>
    <link rel="stylesheet" href="css/viewer.min.css">
    <style>
    * { margin: 0; padding: 0;}
    #jqhtml { width: 700px; margin: 0 auto; font-size: 0;}
    #jqhtml li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
    #jqhtml li img { width: 100%;}
    </style>
    </head>
    
    <body>
    <h1>回调函数</h1>
    
    <ul id="jqhtml">
    	<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
    	<li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
    	<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
    	<li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>
    	<li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>
    	<li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>
    </ul>
    
    <script src="js/viewer.min.js"></script>
    <script>
    var viewer = new Viewer(document.getElementById('jqhtml'), {
    	url: 'data-original',
    
    	build: function() {
    		alert('build');
    	},
    
    	built: function() {
    		alert('built');
    	},
    
    	show: function() {
    		alert('show');
    	},
    
    	shown: function() {
    		alert('shown');
    	},
    
    	hide: function() {
    		alert('hide');
    	},
    
    	hidden: function() {
    		alert('hidden');
    	},
    
    	view: function() {
    		alert('view');
    	},
    
    	viewed: function() {
    		alert('viewed');
    	}
    });
    </script>
    
    

    自定义方法的:

    <!DOCTYPE html>
    <html lang="zh-Hans">
    <head>
    <meta charset="utf-8">
    <title>JS/jQuery图片查看器viewer.js演示-自定义方法</title>
    <link rel="stylesheet" href="css/viewer.min.css">
    <style>
    * { margin: 0; padding: 0;}
    #jqhtml { width: 700px; margin: 0 auto; font-size: 0;}
    #jqhtml li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
    #jqhtml li img { width: 100%;}
    
    .btns { position: relative; z-index: 10000; width: 700px; margin: 0 auto; text-align: center;}
    .btns a { display: inline-block; width: 70px; margin-top: 15px; line-height: 26px; font-size: 12px; color: #fff; background-color: #21b384; text-decoration: none;}
    .btns a:hover { background-color: #1fa67a;}
    </style>
    </head>
    
    <body>
    <h1>自定义方法</h1>
    
    <ul id="jqhtml">
    	<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
    	<li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
    	<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
    	<li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>
    	<li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>
    	<li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>
    </ul>
    
    <div class="btns">
    	<a id="btn1" href="javascript:">show()</a>
    	<a id="btn2" href="javascript:">hide()</a>
    	<a id="btn3" href="javascript:">view()</a>
    	<a id="btn4" href="javascript:">next()</a>
    	<a id="btn5" href="javascript:">prev()</a>
    	<a id="btn6" href="javascript:">move()</a>
    	<a id="btn7" href="javascript:">moveTo()</a>
    	<a id="btn8" href="javascript:">zoom()</a>
    	<a id="btn9" href="javascript:">zoomTo()</a>
    	<a id="btn10" href="javascript:">rotate()</a>
    	<a id="btn11" href="javascript:">rotateTo()</a>
    	<a id="btn12" href="javascript:">scale()</a>
    	<a id="btn13" href="javascript:">scaleX()</a>
    	<a id="btn14" href="javascript:">scaleY()</a>
    	<a id="btn15" href="javascript:">play()</a>
    	<a id="btn16" href="javascript:">stop()</a>
    	<a id="btn17" href="javascript:">full()</a>
    	<a id="btn18" href="javascript:">exit()</a>
    	<a id="btn19" href="javascript:">tooltip()</a>
    	<a id="btn20" href="javascript:">toggle()</a>
    	<a id="btn21" href="javascript:">reset()</a>
    	<a id="btn22" href="javascript:">destroy()</a>
    </div>
    
    <script src="js/viewer.min.js"></script>
    <script>
    var viewer = new Viewer(document.getElementById('jqhtml'), {
    	url: 'data-original'
    });
    
    document.getElementById('btn1').onclick = function() {
    	viewer.show();
    }
    
    document.getElementById('btn2').onclick = function() {
    	viewer.hide();
    }
    
    document.getElementById('btn3').onclick = function() {
    	viewer.view(5);
    }
    
    document.getElementById('btn4').onclick = function() {
    	viewer.next();
    }
    
    document.getElementById('btn5').onclick = function() {
    	viewer.prev();
    }
    
    document.getElementById('btn6').onclick = function() {
    	viewer.move(-10, 0);
    }
    
    document.getElementById('btn7').onclick = function() {
    	viewer.moveTo(0, 0);
    }
    
    document.getElementById('btn8').onclick = function() {
    	viewer.zoom(0.1);
    }
    
    document.getElementById('btn9').onclick = function() {
    	viewer.zoomTo(1);
    }
    
    document.getElementById('btn10').onclick = function() {
    	viewer.rotate(90);
    }
    
    document.getElementById('btn11').onclick = function() {
    	viewer.rotateTo(180);
    }
    
    document.getElementById('btn12').onclick = function() {
    	viewer.scale(-1);
    }
    
    document.getElementById('btn13').onclick = function() {
    	viewer.scaleX(-1);
    }
    
    document.getElementById('btn14').onclick = function() {
    	viewer.scaleY(-1);
    }
    
    document.getElementById('btn15').onclick = function() {
    	viewer.play();
    }
    
    document.getElementById('btn16').onclick = function() {
    	viewer.stop();
    }
    
    document.getElementById('btn17').onclick = function() {
    	viewer.full();
    }
    
    document.getElementById('btn18').onclick = function() {
    	viewer.exit();
    }
    
    document.getElementById('btn19').onclick = function() {
    	viewer.tooltip();
    }
    
    document.getElementById('btn20').onclick = function() {
    	viewer.toggle();
    }
    
    document.getElementById('btn21').onclick = function() {
    	viewer.reset();
    }
    
    document.getElementById('btn22').onclick = function() {
    	viewer.destroy();
    }
    </script>
    
    
    
    
    展开全文
  • * 从 file 域获取 本地图片 url */ function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf("MSIE")>=1) { // IE url = document.getElementById(sourceId).value; } else if...
  • 卖5分,亲自测试通过哦,亲。
  • 使用viewer.js时有时想展示图片的简介,可以对viewer 源码做一些修改。 图中框住的位置本来是显示图片的alt信息的,我想把它替换成图片的简介。 首先,需要在img标签加入data-summary属性,summary的名字可以...
  • js图片预览

    2011-11-24 16:46:52
    js 图片预览js 图片预览js 图片预览js 图片预览
  • js上传图片预览

    2021-06-01 19:41:43
    js上传图片本地预览
  • js上传图片 图片预览

    2010-09-02 12:57:00
    js上传图片 图片预览 js上传图片 图片预览
  • js 图片上传 并预览图片
  • JS图片预览

    2012-05-10 10:30:58
    jquery JS 图片预览 动态 DIV 浮出
  • js生成图片预览

    2016-03-04 16:47:06
    js生成图片预览,点开即可使用。
  • js上传前预览图片

    2014-11-23 01:38:54
    js上传前预览图片

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,463
精华内容 1,785
关键字:

js预览图片