Загрузка нескольких файлов с помощью ajax и php

Я хочу загрузить несколько файлов через ajax, но не могу понять, как я могу получить файлы в PHP. Может кто-нибудь мне помочь? Благодарю вас! Вот код:

HTML:

<form  enctype="multipart/form-data" method="POST">
    <input type="file" id="file" multiple="multiple" name="file"/>
</form>
<div id="info"></div>
<div id="preview"></div>

JavaScript:

$(document).ready(function(){
    $("#file").change(function(){

        var src=$("#file").val();
        if(src!="")
        {
            formdata= new FormData();  // initialize formdata
            var numfiles=this.files.length;  // number of files
            var i, file, progress, size;
            for(i=0;i<numfiles;i++)
            {
                file = this.files[i];
                size = this.files[i].size;
                name = this.files[i].name;
                if (!!file.type.match(/image.*/))  // Verify image file or not
                {
                    if((Math.round(size))<=(1024*1024)) //Limited size 1 MB
                    {
                        var reader = new FileReader();  // initialize filereader
                        reader.readAsDataURL(file);  // read image file to display before upload
                        $("#preview").show();
                        $('#preview').html("");
                        reader.onloadend = function(e){
                            var image = $('<img>').attr('src',e.target.result);
                            $(image).appendTo('#preview');
                        };
                        formdata.append("file[]", file);  // adding file to formdata
                        console.log(formdata);
                        if(i==(numfiles-1))
                        {
                            $("#info").html("wait a moment to complete upload");
                            $.ajax({

                                url: _url + "?module=ProductManagement&action=multiplePhotoUpload",
                                type: "POST",
                                data: formdata,
                                processData: false,
                                contentType: false,
                                success: function(res){
                                    if(res!="0")
                                        $("#info").html("Successfully Uploaded");
                                    else
                                        $("#info").html("Error in upload. Retry");
                                }
                            });
                        }
                    }
                    else
                    {
                        $("#info").html(name+"Size limit exceeded");
                        $("#preview").hide();
                        return;
                    }
                }
                else
                {
                    $("#info").html(name+"Not image file");
                    $("#preview").hide();
                    return;
                }
            }
        }
        else
        {
            $("#info").html("Select an image file");
            $("#preview").hide();
            return;
        }
        return false;
    });
});

А в PHP я получаю $_POST и $_FILES как пустой массив; Только если я делаю file_get_contents("php://input"); я получаю что-то вроде

-----------------------------89254151319921744961145854436
Content-Disposition: form-data; name="file[]"; filename="dasha.png"
Content-Type: image/png

PNG

���
IHDR��Ò��¾���gÇº¨���    pHYs��������tIMEÞ/§ýZ�� �IDATxÚìw`EÆgv¯¥B-4 ½Ò»tBU©)"¶+*"( E¥J7ôÞ;Ò¤W©¡&puwçûce³WR¸ èóûrw»³ï}fö

Но я не могу понять, как действовать дальше.

Я использую Jquery 1.3.2, может быть, это проблема?

Благодарю вас!

Marian 11.09.2014 источник

comment

попробуйте использовать name как массив. как файл [] - Ritesh d joshi 11.09.2014

Ответы (3)

arrow_upward
1
arrow_downward

Извините за ответ, но я пока не могу добавить комментарий.

Я бы рекомендовал не проверять тип файла в javascript, его легко обойти. Я предпочитаю тщательно проверять файл в PHP, прежде чем разрешить его загрузку на сервер.

e.g.

Этот ответ, взятый из другого вопроса (проверка типа загруженного файла с помощью PHP), дает вам представление:

https://stackoverflow.com/a/6755263/1720515

<?php
$allowedTypes = array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF);
$detectedType = exif_imagetype($_FILES['fupload']['tmp_name']);
$error = !in_array($detectedType, $allowedTypes);
?>

Вы можете прочитать документацию по функции exif_imagetype() здесь< /сильный>.

Не могли бы вы опубликовать свой PHP-код, пожалуйста? И я обновлю свой ответ, если мне будет что добавить.

ОБНОВЛЕНИЕ:

ПРИМЕЧАНИЕ. Атрибут "несколько" (multiple="multiple") нельзя использовать с полем <input type='file' />. В форме необходимо будет использовать несколько полей <input type='file' />, называя каждое поле одинаково с добавлением [] в конце, чтобы убедиться, что содержимое каждого поля добавляется в массив и не перезаписывает друг друга при публикации формы.

e.g.

<form enctype="multipart/form-data" method="POST"> <input type="file" id="file_0" name="img_file[]" /> <input type="file" id="file_1" name="img_file[]" /> <input type="file" id="file_2" name="img_file[]" /> </form>

При отправке формы содержимое любых <input type='file' /> полей будет добавлено в массив PHP $_FILES. Затем на файлы можно ссылаться с помощью $_FILES['img_file'][*parameter*][*i*], где 'i' – это ключ, связанный с вводом файла, а 'paramter' – один из нескольких параметров, связанных с каждым элементом файла. массив $_FILES:

e.g.

$_FILES['img_file']['tmp_name'][0] - при отправке формы на сервере создается временный файл, этот элемент содержит 'tmp_name', сгенерированный для файла.

$_FILES['img_file']['name'][0] - содержит имя файла, включая расширение файла.

$_FILES['img_file']['size'][0] - содержит размер файла.

$_FILES['img_file']['tmp_name'][0] можно использовать для предварительного просмотра файлов перед их постоянной загрузкой на сервер (судя по вашему коду, эту функцию вы хотите включить)

Затем файл необходимо переместить в его постоянное место на сервере с помощью move_uploaded_file. () функция.

Вот пример кода:

<?php if (!empty($_FILES)) { foreach ($_FILES['img_file']['tmp_name'] as $file_key => $file_val) { /* ...perform checks on file here e.g. Check file size is within your desired limits, Check file type is an image before proceeding, etc. */ $permanent_filename = $_FILES['img_file']['name'][$file_key]; if (@move_uploaded_file($file_val, 'upload_dir/' . $permanent_filename)) { // Successful upload } else { // Catch any errors } } } ?>

Вот несколько ссылок, которые могут помочь вашему пониманию:

http://www.w3schools.com/php/php_file_upload.asp

http://php.net/manual/en/features.file-upload.multiple.php

http://www.sitepoint.com/handle-file-uploads-php/< /а>

Кроме того, некоторые дополнительные материалы по теории защиты от уязвимостей при загрузке файлов:

http://en.wikibooks.org/wiki/Web_Application_Security_Guide/File_upload_vulnerabilities

James Whiteley 11.09.2014

comment

Что касается PHP-кода, я ничего не могу опубликовать, потому что не могу понять, как получить данные и обработать их. Единственное, что у меня есть вход $file = file_get_contents(php://input); print_r ($ файл); - Marian; 11.09.2014

comment

Я знаю, как загрузить файл на сервер, но основная проблема, с которой я сталкиваюсь, заключается в том, что я пытаюсь сделать это с помощью ajax. На данный момент простой var_dump глобальных переменных $_FILES и $_POST возвращает пустое значение. единственный способ получить что-то взамен — использовать $file = file_get_contents(php://input); но я не знаю, как исходить из этого. Спасибо, Джеймс, за ответы! - Marian; 11.09.2014

comment

Итак, файл PHP, который вы отправляете в (_url + "?module=ProductManagement&action=multiplePhotoUpload"), содержит только $file = file_get_contents("php://input"); print_r($file);? - James Whiteley; 11.09.2014

comment

да, и простой var_dump показывает в консоли строку символов, как я показал выше. - Marian; 12.09.2014

arrow_upward
1
arrow_downward

Вы можете использовать ajax form плагин загрузки

Это то, что я нашел пару дней назад и реализовал таким образом
Ссылка: ССЫЛКА

Ваш PHP-код может быть таким

uploadimage.php

$response = array(); foreach ($_FILES as $file) { /* Function for moving file to a location and get it's URL */ $response[] = FileUploader::uploadImage($file); } echo json_encode($response);

JS Code

options = { beforeSend: function() { // Do some image loading }, uploadProgress: function(event, position, total, percentComplete) { // Do some upload progresss }, success: function() { // After Success }, complete: function(response) { // Stop Loading }, error: function() { } }; $("#form").ajaxForm(options);

Теперь вы можете вызвать любой AJAX и отправить форму.

Raja 11.09.2014

arrow_upward
0
arrow_downward

Вы должны рассмотреть ниже код

HTML

<input type="file" name="fileUpload" multiple>

AJAX

прежде всего вы должны получить все файлы, которые вы выбираете в «файле типа ввода», как это.

var file_data = $('input[type="file"]')[0].files; var form_data = new FormData(); for(var i=0;i<file_data.length;i++) { form_data.append(file_data[i]['name'], file_data[i]); }

тогда все ваши данные находятся в объекте formData, теперь вы можете отправить его на сервер (php) следующим образом.

$.ajax({ url: 'upload.php', //your php action page name dataType: 'json', contentType: false, processData: false, data: form_data, type: 'post', success: function (result) { // code you want to execute on success of ajax request }, error: function (result) { //code you want to execute on failure of ajax request } });

PHP

<?php foreach($_FILES as $key=>$value) { move_uploaded_file($_FILES[$key]['tmp_name'], 'uploads/' .$_FILES[$key]['name']); }

Kanaiyalal Badal 19.03.2020

Загрузка нескольких файлов с помощью ajax и php

Ответы (3)

Вопросы по теме