<html>
<head>
<script src="java/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="java/jquery01.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("input.file_5").filestyle({
image: "choose-file.gif",
imageheight : 22,
imagewidth : 82,
width : 500
});
});
</script>
<style type="text/css">
.file_5 {
background: #fff;
color: #888;
}
</style>
</head>
<form action="">
<input type="file" class="file_5" /><br />
</form>
</body>
</html>
jquery - Как получить полный путь?
Всем здравия и благополучия!
Помогите пожлуйста разобраться с jquery которая была применина к <input type="file"/>,
дабы избавиться от стандартной кнопки "обзора", которую каждый браузер показывает поразному.
Вообщем необходимо после выбора файла получить полный путь этого файла (например "c:\foto\home.gif"), а то jquery показывает только имя типа (home.gif).
Снизу привожу кусок кода...Заранее благодарен...
>>>>index.html
>>>>jquery01.js
>>>>jquery-1.3.2.min.js
Помогите пожлуйста разобраться с jquery которая была применина к <input type="file"/>,
дабы избавиться от стандартной кнопки "обзора", которую каждый браузер показывает поразному.
Вообщем необходимо после выбора файла получить полный путь этого файла (например "c:\foto\home.gif"), а то jquery показывает только имя типа (home.gif).
Снизу привожу кусок кода...Заранее благодарен...
>>>>index.html
Код:
>>>>jquery01.js
Код:
/*
* Style File - jQuery plugin for styling file input elements
*
* Copyright (c) 2007-2009 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Based on work by Shaun Inman
* http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
*
*/
(function($) {
$.fn.filestyle = function(options) {
/* TODO: This should not override CSS. */
var settings = {
width : 250
};
if(options) {
$.extend(settings, options);
};
return this.each(function() {
var self = this;
var wrapper = $("<div>")
.css({
"width": settings.imagewidth + "px",
"height": settings.imageheight + "px",
"background": "url(" + settings.image + ") 0 0 no-repeat",
"background-position": "right",
"display": "inline",
"position": "absolute",
"overflow": "hidden"
});
var filename = $('<input class="file">')
.addClass($(self).attr("class"))
.css({
"display": "inline",
"width": settings.width + "px"
});
$(self).before(filename);
$(self).wrap(wrapper);
$(self).css({
"position": "relative",
"height": settings.imageheight + "px",
"width": settings.width + "px",
"display": "inline",
"cursor": "pointer",
"opacity": "0.0"
});
if ($.browser.mozilla) {
if (/Win/.test(navigator.platform)) {
$(self).css("margin-left", "-142px");
} else {
$(self).css("margin-left", "-168px");
};
} else {
$(self).css("margin-left", settings.imagewidth - settings.width + "px");
};
$(self).bind("change", function() {
filename.val($(self).val());
});
});
};
})(jQuery);
* Style File - jQuery plugin for styling file input elements
*
* Copyright (c) 2007-2009 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Based on work by Shaun Inman
* http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
*
*/
(function($) {
$.fn.filestyle = function(options) {
/* TODO: This should not override CSS. */
var settings = {
width : 250
};
if(options) {
$.extend(settings, options);
};
return this.each(function() {
var self = this;
var wrapper = $("<div>")
.css({
"width": settings.imagewidth + "px",
"height": settings.imageheight + "px",
"background": "url(" + settings.image + ") 0 0 no-repeat",
"background-position": "right",
"display": "inline",
"position": "absolute",
"overflow": "hidden"
});
var filename = $('<input class="file">')
.addClass($(self).attr("class"))
.css({
"display": "inline",
"width": settings.width + "px"
});
$(self).before(filename);
$(self).wrap(wrapper);
$(self).css({
"position": "relative",
"height": settings.imageheight + "px",
"width": settings.width + "px",
"display": "inline",
"cursor": "pointer",
"opacity": "0.0"
});
if ($.browser.mozilla) {
if (/Win/.test(navigator.platform)) {
$(self).css("margin-left", "-142px");
} else {
$(self).css("margin-left", "-168px");
};
} else {
$(self).css("margin-left", settings.imagewidth - settings.width + "px");
};
$(self).bind("change", function() {
filename.val($(self).val());
});
});
};
})(jQuery);
>>>>jquery-1.3.2.min.js
Код:
http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
Насколько я помню - полный путь получить нельзя
Как получить путь если честно не знаю, но что б избавиться от стандартной кнопочки "обзор", я <input type="file"/> с прозрачностью = 0 накладывал на красивую кнопочку, и когда наживали на эту самую кнопочку, то срабатывал <input type="file"/> :D
Цитата: Trasn
Как получить путь если честно не знаю, но что б избавиться от стандартной кнопочки "обзор", я <input type="file"/> с прозрачностью = 0 накладывал на красивую кнопочку, и когда наживали на эту самую кнопочку, то срабатывал <input type="file"/> :D
Покажите пожалуйста пример, такого кода.
Цитата: gloomen
Покажите пожалуйста пример, такого кода.
Короче как у меня это все было
Подлючаем jquery
[HTML]
<div style="position: absolute;">
<input type="text" name="" id="text_upload_mirror"><a>Some img</a>
</div>
<input type="file" id="form_upload" style="opacity: 0; position: absolute;" name="" size="20">
<script type="text/javascript">
$(document).ready(function(){
$('#form_upload').change(function (){
var name=$('#form_upload').val();
$('#text_upload_mirror').val(name);
});
});
</script>
[/HTML]
Some img - все что угодно(картинка, ссылка...)
И надо подбирать по размерам
PS: Понимаю, не самый рациональный способ
Подлючаем jquery
[HTML]
<div style="position: absolute;">
<input type="text" name="" id="text_upload_mirror"><a>Some img</a>
</div>
<input type="file" id="form_upload" style="opacity: 0; position: absolute;" name="" size="20">
<script type="text/javascript">
$(document).ready(function(){
$('#form_upload').change(function (){
var name=$('#form_upload').val();
$('#text_upload_mirror').val(name);
});
});
</script>
[/HTML]
Some img - все что угодно(картинка, ссылка...)
И надо подбирать по размерам
PS: Понимаю, не самый рациональный способ