js获取input file完整路径的方法
function getPath()
{
//判断浏览器
var Sys = {};
var obj = document.getElementById("headImg");
var viewer = document.getElementById("viewImg");
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
var path="";
if(Sys.ie<="6.0"){
//ie5.5,ie6.0
viewer.src = obj.value;
}else if(Sys.ie>="7.0"){
//ie7,ie8
obj.select();
//加上这一句防止报告安全问题
obj.blur();
viewer.src = document.selection.createRange().text;
}else if(Sys.firefox){
if (obj.files) {
var accept = ["image/png","image/jpeg","image/jpg","image/gif"];
if (accept.indexOf(obj.files[0].type) > -1) {
var reader = new FileReader();
reader.readAsDataURL(obj.files[0]);
//延迟一会等待文件读取完毕
var t = setTimeout(function(){
viewer.src = reader.result;
clearTimeout(t);
},100)
}
}
else
{
viewer.src = obj.value;
}
}else if(Sys.chrome){
viewer.src = obj.value;
}
}
<form>
<input type="file" id="headImg" />
<input id="btnOk" type="button" value="ok" onclick="getPath()"/>
<img src="http://blog.163.com/zhchf_52@yeah/blog/" alt="view" id="viewImg" />
</form>
由于IE9不能实时的显示图片,所以采用滤镜的方法:
<style type="text/css">
#viewImg2{ /* 该对象用于在IE下显示预览图片 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width:150px;
height:150px;
display:none;
overflow: hidden;
}
#viewImg{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
width:150px;
height:150px;
display:none;
overflow:hidden;
}
</style>
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<input type="file" id="headImg" onchange="view()" name="headImg"/>
<input type="submit" value="保存" id="btnSave" disabled="disabled" />
<p class="lineH30 color6">建议使用正方形的图片,支持JPG、GIF、PNG格式,100K以内。</p>
<div id="viewImg2"></div>
<img src="http://blog.163.com/zhchf_52@yeah/blog/" alt="" id="viewImg"/>
<script type="text/javascript">
//file文件控件,viewer 图像查看,accept支持的文件格式的mimetype数组
function viewImage(file, viewer, viewer2, btn, accept) {
//判断浏览器
var Sys = {};
if (file && viewer) {
if (!viewer2) {
viewer2 = viewer;
}
if (!accept || accept.length == 0) {
accept = ["image/png", "image/jpeg", "image/jpg", "image/gif", "image/bmp"];
}
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
var path = "";
if (Sys.ie) {
viewer.style.display = "none";
if (Sys.ie <= "6.0") {
//ie5.5,ie6.0
path = file.value;
}
else if (Sys.ie >= "7.0") {
//ie7,ie8
file.select();
//加上这一句防止报告安全问题
file.blur();
path = document.selection.createRange().text;
}
v = isValidImage(path, accept);
if (v) {
viewer2.style.display = "block";
if (viewer2.filters) {
viewer2.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
}
else {
viewer2.src = path;
}
}
}
else if (Sys.firefox) {
viewer2.style.display = "none";
viewer.style.display = "block";
if (file.files && file.files.length > 0) {
if (accept.indexOf(file.files[0].type) > -1) {
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
//延迟一会等待文件读取完毕
var t = setTimeout(function () {
viewer.src = reader.result;
clearTimeout(t);
}, 100);
v = true;
}
}
else {
path = file.value;
v = isValidImage(path, accept);
if (v) {
viewer.src = file.value;
}
}
}
else {
viewer2.style.display = "none";
viewer.style.display = "block";
path = file.value;
v = isValidImage(path, accept);
if (v) {
viewer.src = file.value;
}
}
if (v) {
if (btn) {
$("#" + btn).removeAttr("disabled");
}
}
else {
viewer.src="http://blog.163.com/zhchf_52@yeah/blog/";
$("#btnSave").attr("disabled", "disabled");
}
}
}
//是否为有效的图片格式
function isValidImage(path, accept) {
var v = false;
if (path
&& path.length > 0
&& path.indexOf(".") > 0
&& accept
&& accept.length > 0) {
var idx = path.lastIndexOf(".") + 1;
if (path.length > idx) {
var ext = path.substr(idx).toLowerCase();
for (var i = 0; i < accept.length; i++) {
if (accept[i].indexOf("/" + ext) > 0) {
v = true;
break;
}
}
}
}
return v;
}
function autoSizePreview(objPre, originalWidth, originalHeight) {
var zoomParam = clacImgZoomParam(150, 150, originalWidth, originalHeight);
objPre.style.width = zoomParam.width + 'px';
objPre.style.height = zoomParam.height + 'px';
objPre.style.marginTop = zoomParam.top + 'px';
objPre.style.marginLeft = zoomParam.left + 'px';
}
function clacImgZoomParam(maxWidth, maxHeight, width, height) {
var param = { width: width, height: height, top: 0, left: 0 };
if (width > maxWidth || height > maxHeight) {
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if (rateWidth > rateHeight) {
param.width = maxWidth;
param.height = height / rateWidth;
} else {
param.width = width / rateHeight;
param.height = maxHeight;
}
}
param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2;
return param;
}
function view() {
viewImage(document.getElementById("headImg"),
document.getElementById("viewImg"),
document.getElementById("viewImg2"),
"btnSave",
accept);
}
</script>
</form>
js获取input file完整路径的方法的更多相关文章
- js 获取input file路径改变图像地址
html代码 <img id="newImage" alt="100x100" src="__PUBLIC__/img/1.jpg" ...
- js获取input file路径改变图像地址
版权声明:好歹是我写的或者总结的或者抄的,总待给我个名份吧~ https://blog.csdn.net/sangjinchao/article/details/52250318 html代码 < ...
- js获取 input file 图片缩略图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 获取 input file 文件 附给 image src
var a=document.querySelector('input[type=file]'); a.onchange = function (e) { //var reader = new Fil ...
- js获取input file文件二进制码
<html> <body> <img id="image"src=""/> <br/> <input ty ...
- js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息
文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...
- js清空input file的值
原文:js清空input file的值 在做选择本地图片上传的功能时遇到一个问题,第一次点file按钮选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,但把创建的img ...
- javascript中外部js文件取得自身完整路径得办法
原文:javascript中外部js文件取得自身完整路径得办法 有时候我们需要引入一个外部js文件,这个js文件又需要用到自己的路径或者是所在的目录,别问怎么又这么变态的需求,开发做久了各种奇葩需求也 ...
- JS获取fileupload文件全路径
来自:http://hi.baidu.com/libos88/item/c61ab8bae472afe34ec7fdfb 最近在写个小网站,用到了fileupload控件来上传文件.因为程序的某些需要 ...
随机推荐
- html加载js那些事
浏览器通过内置的JavaScript引擎,读取网页中的代码,对其处理后运行. JavaScript代码嵌入网页的方法 在网页中嵌入JavaScript代码有多种方法. 直接添加代码块 通过script ...
- Sublime 学习记录(三) Emmet 插件
i. 安装 : 打开命令面板 输入pci 回车 然后输入emmet 回车即可 ii.用处 : 快速编写html和css代码(快捷键:tab建) iii.html用法: 1) 初始化,html ...
- SpringMVC中采用简洁的配置实现文件上传
文件上传我们一般会有两种策略,一种是通过IO流上传,还有一种是通过表单上传,其实这两种在客户端实现起来都是很简单的,在服务端处理会略有差别,个人感觉IO上传代码简单,但是也有很多硬伤,还是表单上传更合 ...
- EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配
C# mvc+EF 运行视图时出现问题:未能加载文件或程序集"EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToke ...
- C# 知识点回顾
一.基础知识 1.主函数:主函数是程序运行的入口. 2.数据类型: 值类型:整形(有符号.无符号)浮点型(float.double.decimal) 字符型(char.datetime) 结构体(范例 ...
- OpenGL鼠标旋转图像
(鼠标旋转功能) #include <iostream> using namespace std; #include<gl/glut.h> GLfloat transx,tra ...
- 文本导出到pdf文件
程序中数据导出是经常有的需求,今天学习把文本导出到pdf文件.主要是用QPrinter,QPainter TextEditToPdf::TextEditToPdf(QWidget *parent, Q ...
- 浅析C++内存分配与释放操作过程——三种方式可以分配内存new operator, operator new,placement new
引言:C++中总共有三种方式可以分配内存,new operator, operator new,placement new. 一,new operator 这就是我们最常使用的 new 操作符.查看汇 ...
- 栈和队列的Java实现
一. 栈 1.概念 栈是一种特殊的线性表,它只能在栈顶(top)进行插入(push)和删除(pop)操作. 栈的常用操作: 入栈(push):向栈顶插入元素 出栈(pop):从栈顶删除元素 访问栈顶 ...
- 网易云课堂_程序设计入门-C语言_第一周:简单的计算程序_1逆序的三位数
1 逆序的三位数(5分) 题目内容: 程序每次读入一个正三位数,然后输出逆序的数字.注意,当输入的数字含有结尾的0时,输出不应带有前导的0.比如输入700,输出应该是7. 输入格式: 每个测试是一个3 ...