Как известно, со стороны javascript мы не можем обратиться напрямую к файлу или файлам. Единственное, можно лишь получить имя файла. Допустим, перед нами поставили задачу, организовать возможность до загрузки файла на сервер редактировать имя выбранного файла. В лоб это невозможно, но можно воспользоваться обходным путем: 1 - нужно попытаться как-то скрыть стандартный элемент обозревателя файлов, 2 - организовать вспомогательные интерфейсы, способные вызывать обозреватель файлов и получать в свое распоряжение имя файла, 3 - при сохранении файла на стороне сервера подменять имя файла на редактируемое.
Ниже представлено одно из решений данной задачки. Обратите внимание на хак, скрывающего стандартный элемент обозревателя файлов. Также в интерфейсе редактирования имени файла использован атрибут - readonly, если попытаться использовать - disabled, для предупреждения режима редактирования файла, но тогда фактически из формы будет исключен данный элемент, а значит невозможно будет отсылать редактируемое имя серверу. Решение протестировано на большинстве браузеров свежих релизов.
<?php
if (isset($_REQUEST['action']) && $_REQUEST['action'] == 'save') {
if (!empty($_FILES['file']['name'])) {
$short_name = $_REQUEST['short_name'];
$exstension = !empty($_REQUEST['exstension']) ? '.'.$_REQUEST['exstension'] : '';
$file_name = $short_name.$exstension;
$upload_dir = "./files/test";
if (!file_exists($upload_dir)) {
mkdir($upload_dir);
}
if ($_FILES['file']['error'][0] == 0) {
$upload_file = $upload_dir.'/'.$file_name;
move_uploaded_file($_FILES['file']['tmp_name'][0], $upload_file);
}
}
}
?>
<html>
<head>
<title>test</title>
</head>
<style>
#choose_btn {
width: 80px;
}
#submit_btn {
width: 80px;
}
#file_view table {
width: 300px;
}
#file_view {
background: #FFF;
border: solid #364658;
border-width: 1px;
width: 300px;
}
#file_view td {
width: 100px;
border: solid #364658;
border-width: 1px;
text-align: center;
}
.input_file {
position: absolute;
margin-left: -9000px;
-moz-opacity: 0;
filter: alpha(opacity=0);
opacity: 0.5;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).on('change', '#input_file_btn', function(){
var file = {};
file.name = this.value,
win = /.*\\(.*)/,
unix = /.*\/(.*)/,
separator = /\./,
extension = /\w+/,
file.name = file.name.replace(win, "$1"),
file.name = file.name.replace(unix, "$1"),
file.name_parts = file.name.split(separator),
file.short_name = file.name_parts[0],
file.extension = file.name_parts[file.name_parts.length - 1];
file.extension = file.name_parts.length > 1 && extension.test(file.extension) ? file.extension : '';
$('#file_short_name').val(file.short_name);
$('#file_exstension').val(file.extension);
$('#file_short_name').prop('readonly', true);
}).on('click', '#edit', function(){
$('#file_short_name').prop('readonly', false);
}).on('click', '#choose_btn', function(){
$('#input_file_btn').trigger('click');
});
</script>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="action" value="save"/>
<input type="file" name="file[]" id="input_file_btn" class="input_file"/>
<div>
<table id="file_view">
<thead>
<tr>
<td>mode</td>
<td>file short name</td>
<td>file exstension</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<span id="edit" style="color: blue; border-bottom: 1px dashed; cursor: pointer;">
edit
</span>
</td>
<td>
<input type="text" id="file_short_name" name="short_name" readonly />
</td>
<td>
<input type="text" id="file_exstension" name="exstension" readonly />
</td>
</tr>
</tbody>
</table>
</div>
<div>
<input id="choose_btn" type="button" value="choose file"/>
<input id="submit_btn" type="submit" value="save file"/>
</div>
</form>
</body>
</html>