js获取url中get传参以及预览图片等...几个

60 阅读 0 评论 40 点赞

我是靠谱客的博主坦率短靴，最近开发中收集的这篇文章主要介绍js获取url中get传参以及预览图片等...几个，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.js获取url中get方式传输的参数：

//获取url中get方式传的参数
function getPar(par){
//比如获取id xxx.html?id=100
var local_url = document.location.href;
//获取要取得的get参数位置
var get = local_url.indexOf(par + "=");
if(get == -1) {
return false;
}else{
//截取字符串
var get_par = local_url.slice(par.length + get + 1);
//判断截取后的字符串是否还有其他get参数
var nextPar = get_par.indexOf("&");
if (nextPar != -1) {
get_par = get_par.slice(0, nextPar);
}
return get_par;
}
}

2.js根据文件路径获取文件名字：

<script type="text/javascript">
var fullFilename = "C:\高拍仪图片\test.png";
var filenameArray = fullFilename.split('\');
var filename = filenameArray[filenameArray.length-1];
console.log(filename);
</script>

3.js预览本地图片：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js预览本地图片</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<style>
.imgBig{
width: 500px;
height: 500px;
position: fixed;
top: 100px;
bottom: 0;
left: 500px;
z-index: 1040;
background-color: #828282;
opacity: .5;
}
#toBigImg{
max-width: 100%;
max-height: 100%;
}
.imgclose{
float: right;
left: 14px;
top: -10px;
position: relative;
}
</style>
<body>
<form action="">
<input type="file" name="imgOne" id="imgOne" οnchange="preImg(this.id,'imgPre');" />
<img id="imgPre" src="" width="300px" height="300px" style="display: block;" />
</form>
</br>
<div class="imgBig">
<img class="imgclose" src="images/close_link.png" />
<img id="toBigImg" src="" />
</div>
<button οnclick="scaleBig()">放大</button>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
/**
* 从 file 域获取 本地图片 url
*/
function getFileUrl(sourceId) {
var url;
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
url = document.getElementById(sourceId).value;
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return url;
}
/**
* 将本地图片 显示到浏览器上
*/
function preImg(sourceId, targetId) {
var url = getFileUrl(sourceId);
var imgPre = document.getElementById(targetId);
imgPre.src = url;
}
/* 方法图片 */
function scaleBig(){
var oldimg = document.getElementById("imgPre");
var bigimg = document.getElementById("toBigImg");
bigimg.src = oldimg.src;
}
</script>
</body>
</html>