JS 图片预览功能

<script type="text/javascript">
    function DisplayImage(fileTag) {
        document.getElementById(‘viewfile‘).value = fileTag.value;
        fileTag.style.display = ‘none‘;
        var allowExtention = ".jpg.png.gif.JPG.PNG.GIF";
        var extentionArr = fileTag.value.split(‘.‘);
        var extention = extentionArr[extentionArr.length - 1];
        if (!(allowExtention.indexOf(extention) > -1)) {
            alert("请选择图片!");
        } else {
            //for adveced broswer(the newest ie,chrome,ff)
            if (typeof (FileReader) !== "undefined") {

var reader = new FileReader();
                reader.readAsDataURL(fileTag.files[0]);
                reader.onload = function (e) {
                    document.getElementById("img_1").setAttribute("src", e.target.result);
                }
            } else {
                //for(ie6)
                document.getElementById("img_1").setAttribute("src", fileTag.value);
            }
        }
    }
</script>

时间： 2024-10-25 07:43:39

JS 图片预览功能的相关文章

微信小程序的实现图片预览功能

index.wxml <image src="../../images/01.jpg"class="userinfo-avatar" bindtap="previewImg01" background-size="cover"mode="aspectFill"></image> index.js //图片预览功能 previewImg01: function (event) { va

利用js加载本地图片预览功能

直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safari6的问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

原生js实现ajax的文件异步提交功能、图片预览功能.实例

<%-- Created by IntelliJ IDEA. User: yh Date: 2016/12/14 Time: 17:13 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file=&

HTML5实现图片预览功能

两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

实现图片预览功能

本来以为图片预览功能非常的简单,就是在file标签change时获取路径展示给用户,但是浏览器处于安全考虑并不会让脚本获得绝对路径(这会在一定程度上暴露用户的文件 目录),只能获取文件名.所以要通过和后台的配合,在file标签发生change事件时,将图片以ajax的方式发送到后台,后台将图片保存在服务器,然后讲文件地址返回回来,再由前端展示给用户,完成预览功能! 文件的ajax并不是太容易,所以使用了jquery的插件,jquery.form.js.一些参数性问题可以参考form插件. <fo

JS实现的图片预览功能

之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代码: body: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td heig

JavaScript图片上传前的图片预览功能

JS代码: 1 //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 2 function PreviewImage(fileObj, imgPreviewId, divPreviewId) { 3 var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value; 4 v

使用ivx实现图片预览功能的经验总结

在实际案例中经常会需要展示一个图片列表,但是列表中由于图片数量比较多,所以每张图片都会比较小.这时我们需要一个功能,能够点击某一张图片就显示这张图片的大图,今天就是说一下ivx中如何实现这种预览效果. 1.图片列表demo中的图片列表是用循环组件创建的,图片资源已经存放在对象数组里,for容器下的图片组件已经绑定了当前数据中的图片资源.父容器是一个行并且开启了自动换行,每行显示两张图片.2.小图与大图上面循环创建出来的就是小图,我们还需要用一个大的图片组件来显示我们点击后的大图.这里使用了一个横

js 图片预览

图片预览 $('#pac_recipe').change(function() { var imgsrc = ''; if(this.files && this.files[0]) { //chrome firefox imgsrc = window.URL.createObjectURL(this.files[0]); } else { //IE下,使用滤镜 this.select(); imgsrc = document.selection.createRange().text; }