移动端 js 实现图片上传预览

方法一：

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>测试页面</title>

        <script type="text/javascript">

        //图片预览功能

            function previewImage(file, imgNum)

            {

                var MAXWIDTH = 200;

                var MAXHEIGHT = 200;

                var div = document.getElementById('preview' + imgNum);

                if (file.files && file.files[0])

                {

                    div.innerHTML = '<img id=imghead' + imgNum + '>';

                    var img = document.getElementById('imghead' + imgNum + '');

                    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 //

                {

                    var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';

                    file.select();

                    var src = document.selection.createRange().text;

                    div.innerHTML = '<img id=imghead' + imgNum + '>';

                    var img = document.getElementById('imghead2');

                    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" + imgNum + " 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 (width > maxWidth || height > maxHeight)

                {

                    rateWidth = width / maxWidth;

                    rateHeight = height / maxHeight;

                    if (rateWidth > rateHeight)

                    {

                        param.width = maxWidth;

                        param.height = Math.round(height / rateWidth);

                    } else

                    {

                        param.width = Math.round(width / rateHeight);

                        param.height = maxHeight;

                    }

                }

                param.left = Math.round((maxWidth - param.width) / 2);

                param.top = Math.round((maxHeight - param.height) / 2);

                return param;

            }

        </script>

    </head>

    <body>

        <div class="yanzRight">

            <input type="file" value="打开摄像头" title="摄像头" capture="camera" accept="image/*" onchange="previewImage(this, 5)" id="cameraInput">

                <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this, 5)" type="file"/>

                <span class="dui" id="imgOrder_dui" style="display: none;"></span>

        </div>

        <div id="preview5" style="margin-left:150px;clear:both; padding-top:15px;">

            <img src="" alt="" id="imghead5" height="200" width="200" style="display:none;"/>

        </div>

    </body>

</html>

方法二：

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>测试页面</title>

        <script type="text/javascript">

            //下面用于多图片上传预览功能

            function setImagePreviews(avalue) {

                var docObj = document.getElementById("doc");

                var dd = document.getElementById("dd");

                dd.innerHTML = "";

                var fileList = docObj.files;

                for (var i = 0; i < fileList.length; i++) {

                    dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";

                    var imgObjPreview = document.getElementById("img" + i);

                    if (docObj.files && docObj.files[i]) {

                        //火狐下，直接设img属性

                        imgObjPreview.style.display = 'block';

                        imgObjPreview.style.width = '150px';

                        imgObjPreview.style.height = '180px';

                        //imgObjPreview.src = docObj.files[0].getAsDataURL();

                        //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

                        imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);

                    }

                    else {

                        //IE下，使用滤镜

                        docObj.select();

                        var imgSrc = document.selection.createRange().text;

                        alert(imgSrc)

                        var localImagId = document.getElementById("img" + i);

                        //必须设置初始大小

                        localImagId.style.width = "150px";

                        localImagId.style.height = "180px";

                        //图片异常的捕捉，防止用户修改后缀来伪造图片

                        try {

                            localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

                            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

                        }

                        catch (e) {

                            alert("您上传的图片格式不正确，请重新选择!");

                            return false;

                        }

                        imgObjPreview.style.display = 'none';

                        document.selection.empty();

                    }

                }

                return true;

            }

        </script>

    </head>

    <body>

        <div style="margin :0px auto; width:990px;">

            <input type="file"  name="file" id="doc" multiple="multiple"  style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" />

            <div id="dd" style=" width:990px;"></div>

        </div>

    </body>

</html>

移动端 js 实现图片上传预览的更多相关文章

js实现图片上传预览及进度条
原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
[前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
js实现图片上传预览功能，使用base64编码来实现
实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...
JS实现图片上传预览效果：方法一
<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...
js实现图片上传预览
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
js实现图片上传预览功能,使用base64编码来实现
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
js前端实现多图图片上传预览
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

随机推荐

在windows下用python调用darknet的yolo接口
0,目标本人计算机环境:windows7 64位,安装了vs2015专业版,python3.5.2,cygwin,opencv3.3,无gpu 希望实现用python调用yolo函数,实现物体检测. ...
CSS——BFC
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 元素若不是bfc,那么内部浮动元素的高度不参与计算元素若不是bf ...
Swift protocol extension method is called instead of method implemented in subclass
Swift protocol extension method is called instead of method implemented in subclass protocol MyProto ...
java was started but returned exit code =-805306369的处理方法
Myeclipse出现java was started but returned exit code =-805306369的错误,如图: 解决方法: 换个workspaces:换个工作目录,估计估计 ...
运用 node + express + http-proxy-middleware 实现前端代理跨域的详细实例哦
一.你需要准备的知识储备运用node的包管理工具npm 安装插件.中间件的基本知识: 2.express框架的一些基础知识,知道如何建立一个小的服务器:晓得如何快速的搭建一个express框架小应用 ...
LeetCode（48）Rotate Image
题目 You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise ...
集训第六周数学概念与方法概率数论最大公约数 G题
Description There is a hill with n holes around. The holes are signed from 0 to n-1. A rabbit must h ...
Uva 1103 古代象形符号（dfs求连通块， floodfill，进制转换）
题意: 给定一个H行W列的字符矩阵(H<200, W < 50), 输入的是一个十六进制字符, 代表一行四个相邻的二进制, 1代表像素, 0代表没有像素. 然后要求判断输入的是以下哪些图形 ...
Web的三大基石
[HTML] 实现了Web页面. [URL] 1.url Uniform Resource Locator的缩写,称为统一资源定位符.通过URL可以访问到互联网上的一个资源.如:图片.视频.网页等.通 ...
swift -从相册中选择照片并上传
选择本地图片并上传是应用开发中一个比较常见的功能. 原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/det ...

移动端 js 实现图片上传 预览

移动端 js 实现图片上传 预览的更多相关文章

随机推荐

热门专题

移动端 js 实现图片上传预览

移动端 js 实现图片上传预览的更多相关文章