2012-06-15 4 views
12

Сообщите мне, если кто-нибудь знает, в чем проблема с этим кодом.PHP-загрузка файлов с использованием jquery post

В основном я хочу, чтобы загрузить файл с помощью JQuery

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(event) { 
     $('#form1').submit(function(event) { 
     event.preventDefault(); 
     $.post('post.php',function(data){ 
      $('#result').html(data); 
     }); 
     }); 
    }); 
    </script> 
</head> 
<body> 
<form id="form1"> 
    <h3>Please input the XML:</h3> 
    <input id="file" type="file" name="file" /><br/> 
    <input id="submit" type="submit" value="Upload File"/> 
</form> 

<div id="result">call back result will appear here</div> 

</body> 
</html> 

и мой PHP 'Post.php'

<?php 
    echo $file['tmp_name']; 
?> 

Загрузил Имя файла не возвращается обратно. Проблема в том, что я не смог получить доступ к загруженному файлу.

Заранее благодарен! Shiv

+0

что вы делаете –

ответ

16

В основном я хочу, чтобы загрузить файл с помощью JQuery

Вы не можете загружать файлы с помощью AJAX , Вы можете использовать jquery.form плагин, который использует скрытый IFRAME:

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(event) { 
      $('#form1').ajaxForm(function(data) { 
       $('#result').html(data); 
      }); 
     }); 
    </script> 
</head> 
<body> 
<form id="form1" action="post.php" method="post" enctype="multipart/form-data"> 
    <h3>Please input the XML:</h3> 
    <input id="file" type="file" name="file" /><br/> 
    <input id="submit" type="submit" value="Upload File"/> 
</form> 

<div id="result">call back result will appear here</div> 

</body> 
</html> 

Также обратите внимание enctype="multipart/form-data" на форме.

Другая возможность - использовать HTML5 File API, что позволяет достичь этого, если предполагается, что браузер-браузер поддерживает его.

+0

Вы имели в виду, что вы не можете загружать файлы с помощью AJAX или вы не можете загружать файлы с помощью метода jQuery post()? –

5

Нет, нет, вы должны использовать плагин jQuery для асинхронного скачивания файлов. Вы не можете загрузить файл с помощью метода jQuery $ .post. Файл будет загружен со скрытым IFRAME

Другой способ заключается в использовании загрузки HTML5 с FileAPI/BlobApi

+0

Спасибо спариваться! На данный момент я просто перейду с обычной формой представления html вместо jquery post. Таким образом, это работает для меня! – Shiv

0

Попробуйте загрузить с iframe, потому что вы не можете отправить файл с методом $ .post.

-1

Вы также можете попробовать JQuery Uploadify - http://www.uploadify.com/

+0

Почему вы собираетесь использовать внешнюю библиотеку, когда браузер имеет API для этого? – Heitara

+0

Поскольку мы говорили о загрузке файлов давно, я бы сказал, что столетие или больше с точки зрения разработки новых технологий. Когда я предложил, чтобы не было html5, или он только начинался, и что-то большее, чем чистый html, требовал вспышки (в основном).В то время Uploadify была довольно хорошей библиотекой, и среди других функций был показан индикатор выполнения, загрузка нескольких файлов, перетаскивание и, если я правильно помню, был основан на jquery. – norbi771

6

Это не возможно загрузить файлы с JQuery $ .post, Neverthless, с файловым API и XMLHttpRequest, это вполне возможно, чтобы загрузить файл в AJAX, и вы можете даже знаю, сколько данных еще загружено ...

$('input').change(function() 
{ 
    var fileInput = document.querySelector('#file'); 

    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', '/upload/'); 

    xhr.upload.onprogress = function(e) 
    { 
     /* 
     * values that indicate the progression 
     * e.loaded 
     * e.total 
     */ 
    }; 

    xhr.onload = function() 
    { 
     alert('upload complete'); 
    }; 

    // upload success 
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
    { 
     // if your server sends a message on upload sucess, 
     // get it with xhr.responseText 
     alert(xhr.responseText); 
    } 

    var form = new FormData(); 
    form.append('title', this.files[0].name); 
    form.append('pict', fileInput.files[0]); 

    xhr.send(form); 
} 
+0

К сожалению, поддержка XHR2 пока не очень хорошая. Но спасибо за ваш вклад в это, мне удалось сделать полностью рабочий тест с Zepto и некоторыми макетными данными, используя этот подход. –

+0

Все современные версии крупных браузеров поддерживают его (даже IE 10+). http://caniuse.com/xhr2 – Buzut

0

У вашей загрузки.php есть некоторые ошибки.

Вы должны изменить свою часть.

echo $file['tmp_name']; 

к: -

echo $_FILES['file']['tmp_name']; 
Смежные вопросы