移动端 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 ...

随机推荐

PostgreSQL 数据库错误状态编号解释[附带列表
PostgreSQL 服务器发出的所有消息都赋予了五个字符的错误代码, 这些代码遵循 SQL 的 "SQLSTATE" 代码的习惯.需要知道发生了什么错误条件的应用通常应该测试错误 ...
手机酷派4G5316 5313s 黑砖求转成功 9008端口 9006端口少走弯路选对镜像
首先要有资料里面有教程 http://pan.baidu.com/s/1bpjxP6n 1.用其他手机 or u 盘往sd卡放进“强制进入下载模式的文件” 2. 驱动 3.刷机工具下载镜像 ...
eclipse自动为变量生成Get/Set函数
启动Eclipse,打开demo工程.如图: 假定为成员变量test生成Get/Set函数. 光标定位到该成员变量,如图: 右键选择“source”-“Generate Getters and ...
（转）淘淘商城系列——SSM框架整合之Dao层整合
http://blog.csdn.net/yerenyuan_pku/article/details/72721093 一个项目中往往有三层即Dao层.Service层和Web层,看标题就知道了,本文 ...
Android反编译初步
网上关于Android反编译的帖子很多,反编译的步骤也是很详细,本文Android反编译参考博客:https://www.cnblogs.com/dhcn/p/7120891.html 而反编译中最主 ...
pycharm acejumpchar插件
1链接:https://plugins.jetbrains.com/plugin/7163-emacsideas 2将其pycharm路径下:\.PyCharm2017.1\config\plugin ...
Python机器学习——Agglomerative层次聚类
层次聚类(hierarchical clustering)可在不同层次上对数据集进行划分,形成树状的聚类结构.AggregativeClustering是一种常用的层次聚类算法. 其原理是:最初将 ...
CF1000G Two-Paths
题目大意:给你一棵树,其中点上和边上都有值.定义2-Path为经过一条边最多两次的路径,价值为经过点的权值加和-经过边权值*该边经过次数.4e5组询问,每次询问树上连接x,y两点的2-Path的最大价 ...
网络协议TCP
TCP:传输控制协议 tcp的特点:面向连接(打电话模型),可靠传输 tcp通信的三个步骤: 1.通信双方建立连接 2.收发收据 3.关闭连接 tcp客户端实现流程 """ ...
微信小程序 video组件----真机测试position:fixed无效且有黑底
1.问题描述 video组件fixed后,视频随页面滚动,且有个黑色底停留在页面. 页面滚动前滚动后这里贴一下修改前代码,在微信开发者工具看是没有任何问题的.在手机端测试就有以上的问题 <v ...

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

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

随机推荐

热门专题

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

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