移动端 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 ...
随机推荐
- spring 中文乱码问题
spring 开发过程中的中文乱码问题主要分为以下几种: 1.前端传参数到后台前 就已经乱码. 这个很大原因就是前端的问题了! 2.传入后台后,乱码. 可能存在几个原因: 2.1 传入tomcat前 ...
- Android（java）学习笔记197：ContentProvider使用之内容观察者02
下面通过3个应用程序之间的交互说明一下内容观察者: 一. 如下3个应用程序为相互交互的: 二.交互逻辑图: 三.具体代码: 1. 16_数据库工程: (1)数据库帮助类BankDBOpenHelp ...
- python 需求分析
第三章: 需求分析需求分析任务: ??? 功能分析性能分析EG: 相应时间.主存容量.磁盘容量.安全性.等可靠性和可用性出错处理需求系统发现错误时采取的行动,主要在系统关键部分设置接口需求用户接口.硬 ...
- ArrayList集合的特点和几种遍历方法
public class temp { public static void main(String[] args)throws Exception { ArrayList 在定义时长度为空 ,在新增 ...
- zabbix4.2学习笔记--zabbix安装
环境 系统信息 发行版 版本 ip 关系 主机名 centos 7.5 192.168.181.135 服务端 server centos 7.5 192.168.181.136 客户端 client ...
- bootstrap-table的一些基本使用及表内编辑的实现
最近工作需要接触了bootstrap-table 所以研究了一下,并做了笔记,红色位置要特别注意 前端主要使用了 jquery bootstrap-table bootstrap-edittable ...
- Fragment Transactions和Activity状态丢失
本文由 伯乐在线 - 独孤昊天 翻译.未经许可,禁止转载!英文出处:androiddesignpatterns.欢迎加入翻译组. 下面的堆栈跟踪和异常代码,自从Honeycomb的初始发行版本就一直使 ...
- BZOJ3545 Peaks 离线处理+线段树合并
题意: 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道路相连,共M条路径,每条路径有一个困难值,这个值越大表示越难走,现在有Q组询问,每组询问询问从点v开始只经 ...
- 启发式合并CSU - 1811
F - Tree Intersection CSU - 1811 Bobo has a tree with n vertices numbered by 1,2,…,n and (n-1) edges ...
- 页面jsp向后端发送：HTTP 400错误 - 请求无效(Bad request)
HTTP 400错误 - 请求无效(Bad request) jsp页面有误 在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说 ...