Как я могу загрузить файл, используя скрытый iframe + jquery? - PullRequest
Новая
       6

Как я могу загрузить файл, используя скрытый iframe + jquery?

4 голосов
/ 07 сентября 2010

Мы все знаем, что невозможно загружать файлы, используя только jquery.Но можно обойти использование jquery и скрытого IFrame.

Я нашел четыре решения, используя этот метод, но не вижу, как я могу их улучшить.

  1. Это решение, найденное здесь на Stackoverflow , является одним из способов сделать это.Но я не уверен, что это лучший способ.(не проверено)

  2. Использование плагина jQuery Form - еще один вариант.Я попытался следовать этому примеру , но это не помогло.Решение загружает мой uploader.php на новую страницу и не может получить информацию о файле.Я не вижу его, используя IFrame.

  3. Загрузка файла Ajax - это другое решение - это создание динамического IFrame.Глядя на пример кода, я не могу понять, как это реализовать.

  4. Последнее решение - загрузка файла AJAX из Webtoolkit.Здесь я не могу понять, где я должен объявить, какой файл PHP он должен загружать для обработки файлов.

У кого-нибудь есть рабочий пример, использующий один из этих методов?
У меня естьиспользовал Uploadify в другом решении - но я не хочу сейчас использовать flash.

1 Ответ

2 голосов
/ 08 сентября 2010

Для # 3 Это в основном прямо с их сайта.

Я парень .Net, поэтому я не могу помочь вам с обработчиком .php, который вам понадобится для получения файла, но я надеюсь, что вы найдете это полезным. 

<html>
  <head>
    <link href="http://www.phpletter.com/css/general.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script>
    <script type="text/javascript">
    function ajaxFileUpload()
    {
        $.ajaxFileUpload
        (
            {
                //YOUR URL TO RECEIVE THE FILE
                url: 'http://localhost/testing/postfile.php',
                secureuri:false,
                fileElementId:'fileToUpload',
                dataType: 'json',           
                success: function (data, status)
                {
                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);
                        }else
                        {
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e)
                {
                    alert(data.error);
                    alert(e);
                }
            }
        )
        return false;
    }
    </script>
  </head>
  <body>
    <form name="form" action="" method="POST" enctype="multipart/form-data">
        <table cellpadding="0" cellspacing="0" class="tableForm">
            <thead>
                <tr>
                    <th>Ajax File Upload</th>
                </tr>
            </thead>
            <tbody> 
                <tr>
                    <td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td>  
                </tr>
                <tr>
                    <td>Please select a file and click Upload button</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
                </tr>
            </tfoot>
        </table>
    </form>
  </body>
</html>
...