Загрузка файлов с использованием jquery

Статус
В этой теме нельзя размещать новые ответы.

Juri

Мой дом здесь!
Заблокирован
Регистрация
5 Окт 2007
Сообщения
1.064
Реакции
200
  • Автор темы
  • Заблокирован
  • #1
Здравствуйте, был бы благодарен если бы кто то накидал простейший образец для загрузки файла из поля филе с помощью jquery и php. Искал в интернете есть разные предложения, но что то не могу разобраться. Нужно что б человек указывал адрес файла на своем компе(поле file) а затем клацал кнопку загрузить и файил отправлялся на сервер без перезагрузки страницы. Спасибо заранее
 
для аякса используется объект браузера XMLHttpRequest, но он файлы не загружает, поэтому делаются обходные способы, например загрузка через iframe или через flash.

Например плагин jquery form plugin делает через iframe

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.43"></script>

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
    $('#post_form').ajaxForm(function(data){//если ответ получен запускается эта функция 
            //результат получен как вся страница это переменная data тогда выдираем из полученной страницы сообщение в теге с id=post_result
            var post_result = data.match(/<div id="post_result">(.+?)<\/div>/)[1];
            //показываем сообщение
            $('#post_result').text(post_result);
        });
});
</script>
<title>JQuery ajax post</title>
</head>
<body>
<?
$status = "";
if($_POST['send']==1){
    if($_FILES["file"]["tmp_name"]){
        
        $file = getimagesize($_FILES["file"]["tmp_name"]);
        $file_width = $file[0];
        $file_height = $file[1];
        $file_mime = $file['mime'];
        
        if(mb_strtolower($file_mime)!="image/jpeg"){
            $status = "Загрузка только jpg.";
        }else{
            move_uploaded_file($_FILES["file"]["tmp_name"], "upload.jpg");
            $status = "Файл получен.";
        }
    }else{
        $status = "Файла нет.";
    }
}
?>



<div id="post_result"><?=$status ?></div>

<form action="" method="post" id="post_form" enctype="multipart/form-data">
Текст: <input name="test"><br />
Файл: <input name="file" type="file" /><br />
<input type="submit" value="Отправить" />
<input name="send" type="hidden" value="1" />
</form>

</body>
</html>
такой скрипт будет работать и с отключенными яваскриптами.

Если через флаш, то возможно показывать прогресс загрузки.
 
Посмотри тут _http://www.nulled.ws/showthread.php?t=184674 я давал ссылку на хороший загрузчик.
 
  • Автор темы
  • Заблокирован
  • #4
для аякса используется объект браузера XMLHttpRequest, но он файлы не загружает, поэтому делаются обходные способы, например загрузка через iframe или через flash.
Например плагин jquery form plugin делает через iframe
*** скрытое содержание ***
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.43"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
    $('#post_form').ajaxForm(function(data){//если ответ получен запускается эта функция 
            //результат получен как вся страница это переменная data тогда выдираем из полученной страницы сообщение в теге с id=post_result
            var post_result = data.match(/<div id="post_result">(.+?)<\/div>/)[1];
            //показываем сообщение
            $('#post_result').text(post_result);
        });
});
</script>
<title>JQuery ajax post</title>
</head>
<body>
<?
$status = "";
if($_POST['send']==1){
    if($_FILES["file"]["tmp_name"]){
        $file = getimagesize($_FILES["file"]["tmp_name"]);
        $file_width = $file[0];
        $file_height = $file[1];
        $file_mime = $file['mime'];
        if(mb_strtolower($file_mime)!="image/jpeg"){
            $status = "Загрузка только jpg.";
        }else{
            move_uploaded_file($_FILES["file"]["tmp_name"], "upload.jpg");
            $status = "Файл получен.";
        }
    }else{
        $status = "Файла нет.";
    }
}
?>
<div id="post_result"><?=$status ?></div>
<form action="" method="post" id="post_form" enctype="multipart/form-data">
Текст: <input name="test"><br />
Файл: <input name="file" type="file" /><br />
<input type="submit" value="Отправить" />
<input name="send" type="hidden" value="1" />
</form>
</body>
</html>
такой скрипт будет работать и с отключенными яваскриптами.
Если через флаш, то возможно показывать прогресс загрузки.
*** скрытое содержание ***

А зачем в этом примере вообще jquery? обычная загрузка средствами php с перезагрузкой страницы.
Нужно так что б указал фаил, ввел в текстовое поле описание нажал кнопку отправить и все.
 
index.html
HTML:
<html>
	<head>
		<title>Загрузка изображений</title>
		<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
		<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.MultiFile.js"></script>
		<script type="text/javascript" src="js/jquery.form.js"></script>
		<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.MultiFile').MultiFile({ 
	accept:'jpg|gif|png', max:15, STRING: { 
		remove:'• Удалить ',
		file:'$file', 
		selected:'Выбраны: $file', 
		denied:'Неверный тип файла: $ext!', 
		duplicate:'Этот файл уже выбран:\n$file!' 
	} 
});		  
$("#loading").ajaxStart(function(){
	$(this).show();
})
.ajaxComplete(function(){
	$(this).hide();
});
$('#uploadForm').ajaxForm({
	beforeSubmit: function(a,f,o) {
		o.dataType = "html";
		$('#uploadOutput').html('Загружается...');
	},
	success: function(data) {
		var $out = $('#uploadOutput');
		$out.html('Данные обработаны');
		if (typeof data == 'object' && data.nodeType)
			data = elementToString(data.documentElement, true);
		else if (typeof data == 'object')
			data = objToString(data);
		$out.append('<div><pre>'+ data +'</pre></div>');
	}
});
});
</script>	
<style>  
body,td,th {
	font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #434343;
}
a {
	color: #A70000; 
} 
a:link, a:visited {
	color: #A70000; text-decoration: none;
} 
a:hover {
	color: #F70000;
	text-decoration: underline;
}
input
{
    margin:2px 0px;
     background:#eef8fa;
   border:1px solid #84b8c1;
}
textarea
{
    margin:2px 0px;
     background:#eef8fa;
   border:1px solid #84b8c1;
}
select
{
    margin:2px 0px;
     background:#eef8fa;
   border:1px solid #84b8c1;
}
form
{
text-transform:none;
font-weight:normal;
 font-size:8pt;
}
</style>
	</head>
<body> 
    <form id="uploadForm" action="doajaxfileupload.php" method="post" enctype="multipart/form-data">
    	<input name="MAX_FILE_SIZE" value="1000000" type="hidden"/>
     	Выберите картинки: <input name="fileToUpload[]" id="fileToUpload" class="MultiFile" type="file"/>
      	<input value="Загрузить" type="submit"/>
	</form>
 	<img id="loading" src="loading.gif" style="display:none;"/>   
    <div id="uploadOutput"></div> 
</body>
</html>
doajaxfileupload.php
PHP:
<?php
set_time_limit(0);
@session_start ();
@ob_start ();
@ob_implicit_flush ( 0 );
@error_reporting ( E_ALL ^ E_NOTICE );
@ini_set ( 'error_reporting', E_ALL ^ E_NOTICE );
$error = "";
$msg = "";
$fileElementName = 'fileToUpload';
$i = 0;
$files_count = sizeof($_FILES[$fileElementName]["name"]);
for ($i = 0; $i < $files_count-1; $i++) {	
	if(!empty($_FILES[$fileElementName]['error'][$i]))
	{
		switch($_FILES[$fileElementName]['error'][$i])
		{
			case '1':
				$error = 'размер загруженного файла превышает размер установленный параметром upload_max_filesize  в php.ini ';
				break;
			case '2':
				$error = 'размер загруженного файла превышает размер установленный параметром MAX_FILE_SIZE в HTML форме. ';
				break;
			case '3':
				$error = 'загружена только часть файла ';
				break;
			case '4':
				$error = 'файл не был загружен (Пользователь в форме указал неверный путь к файлу). ';
				break;
			case '6':
				$error = 'неверная временная дирректория';
				break;
			case '7':
				$error = 'ошибка записи файла на диск';
				break;
			case '8':
				$error = 'загрузка файла прервана';
				break;
			case '999':
			default:
				$error = 'No error code avaiable';
		}
	}elseif(empty($_FILES[$fileElementName]['tmp_name'][$i]) || $_FILES[$fileElementName]['tmp_name'][$i] == 'none')
	{
		$error = 'No file was uploaded..';
	}else 
	{
	$tmpname[$i] = totranslit(trim($_FILES[$fileElementName]['name'][$i]));
	$prefix = time() - rand(1000,90000); 
	$tmpname[$i] = "".$prefix."_".$tmpname[$i]."";
	$type = strtolower($_FILES[$fileElementName]['type'][$i]);
	$url = str_replace("doajaxfileupload.php",'',$_SERVER['PHP_SELF']);
			if (file_exists("download/images/" . $tmpname[$i])){
      			$error =$tmpname[$i] . " уже существует. ";
      		}
			elseif($type != "image/gif" && $type != "image/jpeg" && $type != "image/png")
    		$error .= "К загрузке допускаются только GIF,JPG,PNG картинки<br>";
    		else{
				if(move_uploaded_file($_FILES[$fileElementName]['tmp_name'][$i], "download/images/" . $tmpname[$i]))
				{
				if(empty($_COOKIE[$tmpname[$i]]))
					{
					$msg .= '<input type="text" style="width:500px;" name="image" value="[img]http://'.$_SERVER['SERVER_NAME'].''.$url.'download/images/'.$tmpname[$i].'[/img]"><br>';
					setcookie($tmpname[$i],md5($tmpname[$i]),time()+5);
					}
				}
				else $error .= 'Uploading status returned error,Reupload your <b>'.$_FILES[$fileElementName]['name'][$i].'</b> image';
			}
			//for security reason, we force to remove all uploaded file
			@unlink($_FILES[$fileElementName][$i]);		
	}		                      
}
 echo $error;
 echo "<br>";
 if(!empty($msg))
 {
 echo "Скопируйте содержимое ( <b>CTRL + C</b> )<br>";
 echo $msg;
 }
?>
 

Вложения

  • js.rar
    35,1 KB · Просмотры: 14
Вообщето есть вариант куда проще: jquery.iframe-post-form.min.js
Позволяет не загоняться и сделать всё максимально просто без перезагрузки страницы.
Просто добавляем такой код на форму и всё:
HTML:
$("form#form_id").iframePostForm({
	complete : function (response)
	{
		alert("COMPLITE");
	}
});
Так что после сабмита формы всё отправиться без перезагрузки.
 

Вложения

  • jquery.iframe-post-form.min.js.zip
    698 байт · Просмотры: 13
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху