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

Тема в разделе "Другие языки", создана пользователем Juri, 6 сен 2010.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. Juri

    Juri

    Заблокирован
    Регистр.:
    5 окт 2007
    Сообщения:
    1.068
    Симпатии:
    197
    Здравствуйте, был бы благодарен если бы кто то накидал простейший образец для загрузки файла из поля филе с помощью jquery и php. Искал в интернете есть разные предложения, но что то не могу разобраться. Нужно что б человек указывал адрес файла на своем компе(поле file) а затем клацал кнопку загрузить и файил отправлялся на сервер без перезагрузки страницы. Спасибо заранее
     
  2. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    для аякса используется объект браузера XMLHttpRequest, но он файлы не загружает, поэтому делаются обходные способы, например загрузка через iframe или через flash.

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

    http://jquery.malsup.com/form/#file-upload

    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.uploadify.com/demo/
     
  3. horpah

    horpah

    Регистр.:
    21 июн 2010
    Сообщения:
    200
    Симпатии:
    55
    Посмотри тут _http://www.nulled.ws/showthread.php?t=184674 я давал ссылку на хороший загрузчик.
     
  4. Juri

    Juri

    Заблокирован
    Регистр.:
    5 окт 2007
    Сообщения:
    1.068
    Симпатии:
    197
    А зачем в этом примере вообще jquery? обычная загрузка средствами php с перезагрузкой страницы.
    Нужно так что б указал фаил, ввел в текстовое поле описание нажал кнопку отправить и все.
     
  5. BKK

    BKK

    Регистр.:
    21 окт 2009
    Сообщения:
    163
    Симпатии:
    45
    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 );
    @
    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 КБ
      Просмотров:
      14
    askarbin нравится это.
  6. EcSYZ

    EcSYZ Создатель

    Регистр.:
    4 авг 2006
    Сообщения:
    26
    Симпатии:
    3
    Вообщето есть вариант куда проще: jquery.iframe-post-form.min.js
    Позволяет не загоняться и сделать всё максимально просто без перезагрузки страницы.
    Просто добавляем такой код на форму и всё:
    HTML:
    
    $("form#form_id").iframePostForm({
    	complete : function (response)
    	{
    		alert("COMPLITE");
    	}
    });
    
    Так что после сабмита формы всё отправиться без перезагрузки.
     

    Вложения:

Статус темы:
Закрыта.