文本框中显示图片路径

问题提出：

(点小图查看大图)

怎么把图片路径显示到那个用红色表示的文本框中显示呢？

用file也显示不了

中国学网其他用户对此信息的回答或评论：

===========================================================================================
红薯 回答于 2012-02-03 13:14 (昨天(13:14))

哦，这个是 KindEditor 自带的插入图片，你可去看看它的源码:)

事实上 type=file 的行为就是这样的啊，除了 chrome 不是

===========================================================================================
pyawen 回答于 2012-02-03 13:22 (昨天(13:22))

上面编辑器的是由一个文本框和 一个file来组成的  file换了样式

当使用 file选择文件之后 会触发change事件 例如

 

<input id="inputText" /><input type="file" id="imgFile"  />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" >
  $(document).ready(function(){
	$("#imgFile").change(function(){ 
             $("#inputText").val(this.value);
	});
  });
</script>

===========================================================================================
pyawen 回答于 2012-02-03 13:32 (昨天(13:32))

下面的将kindeditor 样式 copy过来的效果，自己复制到本地看一下 

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
	.upload {
position: relative;
overflow: hidden;
} 
.ke-inline-block {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
} 
	.ke-button-outer {
	background-position: 0 0;
	padding: 0;
	position: relative;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
	} 
	.ke-button-common {
	background: url(http://www.oschina.net/js/ke/skins/default/bg.gif) no-repeat scroll 0 0 transparent;
	cursor: pointer;
	height: 25px;
	line-height: 25px;
	overflow: visible;
	display: inline-block;
	vertical-align: top;
	}
	.ke-button {
	background-position: right 0;
	padding: 0 12px;
	margin: 0;
	font-family: "sans serif",tahoma,verdana,helvetica;
	border: 0 none;
	color: #333;
	font-size: 12px;
	font-weight: bold;
	left: 2px;
	text-decoration: none;
	border-image: initial;
	}
	#imgFile {
		position: absolute;
		top: 0;
		right: 0;
		width: 70px;
		height: 25px;
		z-index: 811212;
		border: 0 none;
		opacity:0;
		filter:alpha(opacity=0);
	}
</style> 
<span class="ke-inline-block upload">
<input id="inputText" />
<span class="ke-button-common ke-button-outer btn">
	<input type="button" class="ke-button-common ke-button" id="viewLocal" value="浏览..." tabindex="-1">
</span>
<input type="file" id="imgFile"  />
</span>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" >
  $(document).ready(function(){
	$("#imgFile").change(function(){ 
             $("#inputText").val(this.value);
	});
  });
</script>

 

===========================================================================================
小鸟的梦想 回答于 2012-02-03 13:53 (昨天(13:53))

已解决，原因是浏览器问题。用safari浏览器不能显示。谢谢

 

·点此查看本文专栏报道