移动端 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 ...
随机推荐
- SQL——连接查询、聚合函数、开窗函数、分组功能、联合查询、子查询
连接查询 inner join,用的最多,表示多张表一一对应 聚合函数 操作行数据,进行合并 sum.avg.count.max.min 开窗函数 将合并的数据分布到原表的每一行,相当于多出来了一列, ...
- 「Python调试器」，快速定位各种疑难杂症！！
现在很多的编辑器其实都带着「调试程序」的功能,比如写 c/c++ 的 codeblocks,写 Python 的 pycharm,这种图形界面的使用和显示都相当友好,简单方便易学,这个不是我这篇文章要 ...
- Laravel Excel模板导出-带图片
Laravel Excel版本 3.1 1.数据准备 建个2个表,加点数据,控制器中查数据,给模板使用. 表1-order:id, order_no, img_path, note 表2-order_ ...
- 获取select标签选中的值的三种方式
var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // 选中索引 va ...
- 初始化react项目
react脚手架 npm install -g create-react-app 国内npm一般下载比较慢或者是常出现下载失败的情况,我们可以指定下载的仓库: npm install -g creat ...
- eclipse中同步代码PULL报错checkout conflict with files的解决方法
1.Team--->Synchronize Workspace 2.在同步窗口找到冲突文件,把自己本地修改的复制出来 3.在文件上右键选择 Overwrite----->Yes , 4.再 ...
- Android自动化测试之Monkey
本来是做Web后端的,来公司实习变成微信小程序前端了,到这周变成Android APP测试人员了,也是微醺啊. 由于对手工测试终究是有些抵触,所有昨天小试了一下不用写代码的自动化压力测试,在此记下我的 ...
- js读取文本内容，支持csv.txt
js读取文本内容,支持csv.txt <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- ThinkPHP5.X PHP5.6.27-nts + Apache 通过 URL 重写来隐藏入口文件 index.php
我们先来看看官方手册给出关于「URL 重写」的参考: 可以通过 URL 重写隐藏应用的入口文件 index.php ,Apache 的配置参考: 1.http.conf 配置文件加载 mod_rewr ...
- CSS+DIV命名
原地址:http://www.cnblogs.com/hylaz/archive/2012/10/27/2742743.html#2521377 页头:header 登录条:loginBar 标志:l ...