Я пытаюсь реализовать этот способ создания красивой формы загрузки:
www.kavoir.com / 2009/02 / стайлинг-файлы для загрузки-выбор-ввод-управление входами-typefile.html /
, что удивительно и просто, но моя единственная проблема в том, что каждый раз, когда я выбираю файл, он отображается как "C: \ fakepath \ filename". Я нахожусь на Mac, и я не могу на всю жизнь понять, откуда это исходит! Вот мой код:
<?php
error_reporting(E_ALL ^ E_NOTICE);
ini_set('display_errors', '1');
if ($_POST['submit'] == "Submit") {
$temp_file = $_FILES['upload']['tmp_name']."/".$_FILES['upload']['name'];
$target_file = getcwd()."/uploads/".$_FILES['upload']['name'];
// if (!move_uploaded_file($temp_file,$target_file)) {
//
// }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style>
.upload {
position:relative;
width:250px;
height:135px;
border:1px solid #666;
padding:10px;
background:#DDD;
}
.loading {
background:rgba(50,50,50,0.8);
position:absolute;
top:0;
left:0;
width:250px;
height:135px;
}
.realupload {
position:absolute;
bottom:0;
right:0;
/* start of transparency styles */
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
/* end of transparency styles */
z-index:2; /* bring the real upload interactivity up front */
width:200px;
}
form .fakeupload {
/* background:url(uploadify/select.png) no-repeat 100% 50%;
*/ }
form .fakeupload input {
width:238px;
font-family:Arial,sans-serif;
padding:5px;
border:1px solid #666;
background:#FFF;
outline:none;
}
label {
width:120px;
height:30px;
}
label img {
cursor:pointer;
}
.upload a.cancel {
position:absolute;
top:10px;
right:10px;
}
</style>
</head>
<body>
<div class="upload">
<form name="file" method="post" action="test.php" enctype="multipart/form-data">
<label for="realupload"><img src="uploadify/select.png" /></label>
<div class="fakeupload">
<input type="text" name="fakeupload" /> <!-- browse button is here as background -->
</div>
<input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" />
<input id="submit" type="submit" name="submit" value="Submit" />
</form>
<a class="cancel" href="test.php"><img src="uploadify/cancel.png" /></a>
<div class="loading"></div>
</div>
<script>
$(document).ready( function() {
$('div.loading').fadeOut(0);
});
$('form input.submit').click( function() {
$('div.loading').fadeIn(400);
});
</script>
</body>
</html>