#php #jquery #forms #cgi
#php #jquery #формы #cgi
Вопрос:
У меня есть форма, и я пытаюсь выяснить, как я могу отправить форму после того, как пользователь загрузит картинку и будет проверено, что это картинка. Я пытаюсь использовать javascript для проверки загружаемого изображения.
Комментарии:
1. Как пользователь загружает картинку? Обычно они должны отправить форму, чтобы загрузить картинку в первую очередь…
2. Не могли бы вы быть немного более подробными, пожалуйста. Вы будете использовать JavaScript для проверки картинки или PHP?
3. используя
<input type="file" name="uploadfile" id="file" />
4. С php вы не можете проверить файл, пока он не будет загружен. Вы можете загрузить ее асинхронно в
<iframe>
, а затем отправить обратно javascript, чтобы делать все, что пожелаете5. как я могу «отправить обратно javascript»? (С точки зрения кода)
Ответ №1:
Попробуйте это:
<script>
function submitFormAfterImageCheck()
{
if(/(.jpeg|.jpg|.gif|.png|.tiff)$/.test(document.getElementById("myFile").value))
{
document.getElementById("myForm").submit();
}
else
{
alert("you can only upload an image");
}
}
</script>
И HTML:
<input id="myFile" type="file" onchange="submitFormAfterImageCheck();" />
Комментарии:
1. Я добавил код javascript в головную часть документа и добавил следующий код:
<form id="uploadpic" method=post name=upform action="/cgi-bin/upload.cgi" enctype="multipart/form-data"> <input type="file" onchange="submitFormAfterImageCheck();" /> </form>
но он не будет отправлен2. Какой URL-адрес? Я мог бы написать это именно так, как нужно для вас 🙂
3. упс! Мне не хватало
)
в концеif()
4. потрясающе, что сработало, за исключением того, что теперь, независимо от того, что я загружаю, я получаю предупреждение «вы можете загрузить только изображение». Я пробовал .png, .tif и т.д.
5. вы можете проверить, работает ли эта функция
function submitFormAfterImageCheck() {alert(this.value==''?"not working":"working");}
Ответ №2:
вы можете использовать Iframe для обработки загрузки
<iframe src="upload.php" id="uploadHandler"></iframe>
и javascript для обработки статуса загрузки / получения
var form = document.getElementById("avatar_form");
var inpUpload = document.getElementById("upload_button");
var fileSelector = document.getElementById("file_browser");
var uploadHandler = document.getElementById('uploadHandler');
inpUpload.onclick = function() {
form.target = uploadHandler;
uploadHandler.onload = function() {
alert(uploadHandler.document.body.innerHTML);
}
}
и в файле php upload.php
: проверьте массив $ _FILES, все ли в порядке с загруженным файлом, и повторите некоторый ответ, например:
$allowed_extensions = array("jpg", "png", "gif");
if (in_array(end(explode(".", $_FILES['file_browser']['filename'])), $allowed_extensions)) {
echo "upload OK";
}
else {
echo "invalid file";
}
не тестировалось… пока 🙂
Ответ №3:
Вы могли бы проверить расширение файла на стороне клиента, а затем решить, запускать ли отправку для формы следующим образом (стиль jQuery):
<script>
$(function(){
$('#fileDivId').change(function(){
$this = $(this);
if ($.inArray($this.val().split('.').pop().toLowerCase(), ['jpg', 'jpeg', 'png', 'gif']) != -1) {
$this.parent().trigger('submit');
}
});
});
</script>
<form action="post.php" method="POST">
<input type="file" id="fileDivId">
</form>
Но здесь есть несколько слабых мест:
1) Вам все равно придется очистить ваши изображения на стороне сервера
2) Не совсем уверен, как работает $ (‘inputId’).val(), когда тип ввода — «файл». Например, firefox 4 возвращает имя файла, но, если я правильно помню, IE вернет полный путь к файлу (C:DocsImgetc ), и, кроме того, это может быть отключено в некоторых браузерах по соображениям безопасности.
3) Получение части расширения в моем коде не идеально — ситуация с концом: пользователь выбирает файл C:Doc.imgfile_no_ext возвращает «img file_no_ext»