JQuery Ajax Загрузка файла


755

Могу ли я использовать следующий код jQuery для загрузки файла методом POST запроса ajax?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

Если это возможно, мне нужно заполнить dataчасть? Это правильный путь? Я только POST файл на стороне сервера.

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


Ajax не поддерживает загрузку файлов, вместо этого следует использовать iframe
antyrat

1
Связанный вопрос: stackoverflow.com/questions/6974684/…
Натан Куп

Ответы:


596

Загрузка файла является не возможна через AJAX.
Вы можете загрузить файл, не обновляя страницу с помощью IFrame.
Вы можете проверить более подробную информацию здесь .


ОБНОВИТЬ

С XHR2 поддерживается загрузка файлов через AJAX. Например, через FormDataобъект, но, к сожалению, он не поддерживается всеми / старыми браузерами.

FormData Поддержка начинается со следующих версий настольных браузеров.

  • IE 10+
  • Firefox 4.0+
  • Chrome 7+
  • Safari 5+
  • Опера 12+

Для более подробной информации смотрите ссылку MDN .


41
Вот список определенных браузеров, которые не поддерживаются: caniuse.com/#search=FormData Также я не проверял это, но вот полифилл для FormData gist.github.com/3120320
Райан Уайт

152
В частности, IE <10 не для тех, кому лень читать ссылку.
Кевин

22
@ Synexis нет, нам больше не нужно ждать так долго, потому что все IE имеют только 22% мирового рынка и 27% в США и быстро снижаются. Скорее всего, это люди старше 70 лет. Таким образом, вместо того, чтобы IE диктовал, что должны делать разработчики, IE должен либо придти в порядок, либо выйти из гонки.
Дрю Колдер

30
@DrewCalder Большинство пользователей IE - офисные работники, у которых нет выбора, какой браузер использовать из-за политики компании. Я не думаю, что возраст связан с этим. Я предполагаю, что большинство людей> 70 получают своих детей, чтобы установить вместо них Chrome или FF :)
Николя Конно

3
Эта ссылка действительно помогла мне понять минимум. Мне не нужно было использовать запрос xhr. Если вы используете ajax, убедитесь, что для него установлено enctypeзначение "form/multipart"!
Светящийся

316

Iframes больше не нужны для загрузки файлов через ajax. Я недавно сделал это сам. Проверьте эти страницы:

Использование загрузки файлов HTML5 с AJAX и jQuery

http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface

Обновил ответ и убрал его. Используйте функцию getSize, чтобы проверить размер, или используйте функцию getType, чтобы проверить типы. Добавлен прогрессбар html и css код.

var Upload = function (file) {
    this.file = file;
};

Upload.prototype.getType = function() {
    return this.file.type;
};
Upload.prototype.getSize = function() {
    return this.file.size;
};
Upload.prototype.getName = function() {
    return this.file.name;
};
Upload.prototype.doUpload = function () {
    var that = this;
    var formData = new FormData();

    // add assoc key values, this will be posts values
    formData.append("file", this.file, this.getName());
    formData.append("upload_file", true);

    $.ajax({
        type: "POST",
        url: "script",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', that.progressHandling, false);
            }
            return myXhr;
        },
        success: function (data) {
            // your callback here
        },
        error: function (error) {
            // handle error
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
};

Upload.prototype.progressHandling = function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    var progress_bar_id = "#progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    // update progressbars classes so it fits your code
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");
};

Как использовать класс Upload

//Change id to your id
$("#ingredient_file").on("change", function (e) {
    var file = $(this)[0].files[0];
    var upload = new Upload(file);

    // maby check size or type here with upload.getSize() and upload.getType()

    // execute upload
    upload.doUpload();
});

HTML-код Progressbar

<div id="progress-wrp">
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>

Прогрессбар css код

#progress-wrp {
  border: 1px solid #0099CC;
  padding: 1px;
  position: relative;
  height: 30px;
  border-radius: 3px;
  margin: 10px;
  text-align: left;
  background: #fff;
  box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}

#progress-wrp .progress-bar {
  height: 100%;
  border-radius: 3px;
  background-color: #f39ac7;
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status {
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}

3
Вы можете более или менее скопировать код сразу и использовать его. Просто измените некоторые имена и имена классов. Любое приспособление по вашему усмотрению.
Ziinloader

4
Обратите внимание, что myXhr представляется глобальным, а также имя, размер и тип. Также лучше использовать «beforeSend» для дополнения уже созданного объекта XMLHttpRequest, а не «xhr» для его создания, а затем изменить его.
ожидает

8
Я не думаю, что мы можем использовать это как @Ziinloader. Вы используете какой - то локальный метод , который не входит в комплект : writer(catchFile). Что такое writer()?
tandrewnichols

4
Что если данные также содержат несколько полей вместе с файлом для загрузки?
Раджу

2
@Ziinloader Это чрезвычайно полезный пример, который, как я вижу, вы возвращались и поддерживали несколько раз. Действительно, ответ стоит гораздо больше, чем одно возражение, которое я могу дать.
Обычный Джо

191

Возможна запись в Ajax и загрузка файла. Я использую jQuery $.ajaxфункцию для загрузки моих файлов. Я пытался использовать объект XHR, но не смог получить результаты на стороне сервера с PHP.

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);

$.ajax({
       url : 'upload.php',
       type : 'POST',
       data : formData,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
       success : function(data) {
           console.log(data);
           alert(data);
       }
});

Как видите, вы должны создать объект FormData, пустой или из (сериализованный? - $('#yourForm').serialize()) существующая форма), а затем прикрепить входной файл.

Вот дополнительная информация: - Как загрузить файл, используя jQuery.ajax и FormData - Загрузка файлов с помощью jQuery, объект FormData предоставляется без имени файла, запрос GET

Для процесса PHP вы можете использовать что-то вроде этого:

//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);

if($fileError == UPLOAD_ERR_OK){
   //Processes your file here
}else{
   switch($fileError){
     case UPLOAD_ERR_INI_SIZE:   
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_FORM_SIZE:  
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_PARTIAL:    
          $message = 'Error: no terminó la acción de subir el archivo.';
          break;
     case UPLOAD_ERR_NO_FILE:    
          $message = 'Error: ningún archivo fue subido.';
          break;
     case UPLOAD_ERR_NO_TMP_DIR: 
          $message = 'Error: servidor no configurado para carga de archivos.';
          break;
     case UPLOAD_ERR_CANT_WRITE: 
          $message= 'Error: posible falla al grabar el archivo.';
          break;
     case  UPLOAD_ERR_EXTENSION: 
          $message = 'Error: carga de archivo no completada.';
          break;
     default: $message = 'Error: carga de archivo no completada.';
              break;
    }
      echo json_encode(array(
               'error' => true,
               'message' => $message
            ));
}

2
На какую библиотеку jquery мне нужно ссылаться для запуска этого кода?
Рэйден Блэк

Ответ был написан в 2014 году. Версия JQuery была 1.10. Я не пробовал с более свежими версиями.
pedrozopayares

5
formData.append('file', $('#file')[0].files[0]);возвращается undefinedи не console.log(formData) имеет ничего, кроме_proto_
Якоб Убайди

1
Не поддерживается IE 9, если кто-то застрял в том же аду, что и я
CountMurphy

3
Я получил это на работу ... Ущипни меня, я на небесах загрузки файлов jQuery Ajax! var formData = new FormData(); formData.append('file', document.getElementById('file').files[0]); $.ajax({ url : $("form[name='uploadPhoto']").attr("action"), type : 'POST', data : formData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success : function(data) { console.log(data); alert(data); } });
ТАРКУС

104

Простая форма загрузки

 <script>
   //form Submit
   $("form").submit(function(evt){	 
      evt.preventDefault();
      var formData = new FormData($(this)[0]);
   $.ajax({
       url: 'fileUpload',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
   });
   return false;
 });
</script>
<!--Upload Form-->
<form>
  <table>
    <tr>
      <td colspan="2">File Upload</td>
    </tr>
    <tr>
      <th>Select File </th>
      <td><input id="csv" name="csv" type="file" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="submit"/> 
      </td>
    </tr>
  </table>
</form>


Сэр, какие js были использованы в этом примере? Есть ли для этого специальный плагин jquery? У меня есть вопрос, на который мне указали. Вы можете проверить мой вопрос. Я хочу загрузить несколько файлов или изображений в этом проекте здесь. это ссылка stackoverflow.com/questions/28644200/…
Brownman Revival

19
$ (this) [0] is this
machineaddict

2
Какой параметр на сервере для размещенного файла? Можете ли вы опубликовать часть сервера.
FrenkyB

@FrenkyB и другие - файлы на сервере (в PHP) не хранятся в переменной $ _POST - они хранятся в переменной $ _FILES. В этом случае вы получите доступ к нему с помощью $ _FILES ["csv"], потому что "csv" является атрибутом имени входного тега.
dev_masta

68

Я опаздываю на это, но я искал решение для загрузки изображений на основе ajax, и ответ, который я искал, был немного разбросан по всему посту. Решение, на котором я остановился, включало объект FormData. Я собрал основную форму кода, который я собрал. Вы можете увидеть, как это показывает, как добавить настраиваемое поле в форму с помощью fd.append (), а также как обрабатывать данные ответа, когда выполняется запрос ajax.

Загрузить HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Form</title>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");
            $.ajax({
              url: "upload.php",
              type: "POST",
              data: fd,
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
            });
            return false;
        }
    </script>
</head>

<body>
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
        <label>Select a file:</label><br>
        <input type="file" name="file" required />
        <input type="submit" value="Upload" />
    </form>
    <div id="output"></div>
</body>
</html>

В случае, если вы работаете с php, вот способ обработать загрузку, который включает использование обоих пользовательских полей, показанных в приведенном выше html.

upload.php

<?php
if ($_POST["label"]) {
    $label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $label.$_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("uploads/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "uploads/" . $filename);
            echo "Stored in: " . "uploads/" . $filename;
        }
    }
} else {
    echo "Invalid file";
}
?>

я понимаю, Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https,почему это так, сэр, я
копирую и вставляю

2
@HogRider - если вы отправите в Google свое сообщение об ошибке, это будет первым результатом: stackoverflow.com/questions/10752055/… Вы обращаетесь к своим веб-страницам локально file://, а не через веб-сервер? Кроме того, не рекомендуется просто слепо копировать и вставлять код без предварительного понимания. Я бы порекомендовал вам построчно пройти код, чтобы понять, что происходит, прежде чем вводить код в действие.
Колинкамерон

@colincameron спасибо за разъяснение нескольких вещей, которые я проходил через строку, и я не очень понимаю, поэтому я задал вопрос, чтобы кто-то мог прояснить мои сомнения. Я использую локальный способ xampp, чтобы быть точным. Могу ли я задать вопрос, который, возможно, вы можете уточнить?
Пробуждение Браунмана

@Brownman Revival: я знаю, что уже слишком поздно для ответа .. Вы получили ошибку перекрестного источника, потому что вы открыли HTML-файл как файл, чем запустили его с сервера.
Адарш Мохан

@AdarshMohan я оцениваю ответ, как вы предлагаете мне сделать это, чтобы сделать это правильно?
Возрождение Браунмена

31

Загрузка AJAX действительно возможна с XMLHttpRequest(). Нет необходимости в фреймах. Процесс загрузки может быть показан.

Подробности см. В ответе на вопрос https://stackoverflow.com/a/4943774/873282 на вопрос о прогрессе загрузки jQuery и загрузке файла AJAX .


24
К сожалению, IE <10 не поддерживает это.
Саша Чедыгов

1
Если вы просто хотите сослаться на другую страницу в качестве ответа, вы можете проголосовать, чтобы закрыть ее как дупкукат или оставить комментарий под вопросом. Этот пост не является ответом. Пост такого рода выглядит как попытка фармить респ.
Mickmackusa

18

Вот как я получил это работает:

HTML

<input type="file" id="file">
<button id='process-file-button'>Process</button>

JS

$('#process-file-button').on('click', function (e) {
    let files = new FormData(), // you can consider this as 'data bag'
        url = 'yourUrl';

    files.append('fileName', $('#file')[0].files[0]); // append selected file to the bag named 'file'

    $.ajax({
        type: 'post',
        url: url,
        processData: false,
        contentType: false,
        data: files,
        success: function (response) {
            console.log(response);
        },
        error: function (err) {
            console.log(err);
        }
    });
});

PHP

if (isset($_FILES) && !empty($_FILES)) {
    $file = $_FILES['fileName'];
    $name = $file['name'];
    $path = $file['tmp_name'];


    // process your file

}

2
Больше всего мне в этом помогло то, $('#file')[0].files[0]что это какой-то странный обходной путь JS, не требующий надлежащего<form>
ffgpga08

Это полное решение, PHP-бит тоже помогает.
cdsaenz

14

Если вы хотите сделать это так:

$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
    if( progressEvent.lengthComputable) {
        var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
        if( upload) {
            console.log( percent + ' uploaded');
        } else {
            console.log( percent + ' downloaded');
        }
    }
})
.done( function() {
    console.log( 'Finished upload');                    
});

чем

https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js

может быть вашим решением.


Где метод загрузки в $ object, вышеуказанная ссылка не существует
самое крутое 20.12.12


2
Спасибо за публикацию вашего ответа! Пожалуйста, внимательно прочитайте FAQ по саморекламе . Также обратите внимание, что необходимо размещать заявление об отказе от ответственности при каждой ссылке на свой собственный сайт / продукт.
Эндрю Барбер

13
  • Используйте скрытый iframe и установите цель вашей формы на имя этого iframe. Таким образом, при отправке формы обновляется только iframe.
  • Зарегистрируйте обработчик события для события загрузки iframe, чтобы проанализировать ответ.

Больше подробностей в моем блоге: http://blog.manki.in/2011/08/ajax-fie-upload.html .


Избегайте фреймов, где это возможно
Бхаргав Нанекалва

@BhargavNanekalva что тебя беспокоит?
aswzen

13
$("#submit_car").click( function() {
  var formData = new FormData($('#car_cost_form')[0]);
$.ajax({
       url: 'car_costs.php',
       data: formData,
       async: false,
       contentType: false,
       processData: false,
       cache: false,
       type: 'POST',
       success: function(data)
       {
       },
     })    return false;    
});

edit: примечание contentype и данные процесса. Вы можете просто использовать это для загрузки файлов через Ajax ...... отправка ввода не может быть вне элемента формы :)


3
Используя этот метод, вы можете опубликовать форму, но не с полями типа «файл». Этот вопрос конкретно о загрузке файлов.
Джоми Джон

11

2019 обновление:

HTML

<form class="fr" method='POST' enctype="multipart/form-data"> {% csrf_token %}
<textarea name='text'>
<input name='example_image'>
<button type="submit">
</form>

JS

$(document).on('submit', '.fr', function(){

    $.ajax({ 
        type: 'post', 
        url: url, <--- you insert proper URL path to call your views.py function here.
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        data: new FormData(this) ,
        success: function(data) {
             console.log(data);
        }
        });
        return false;

    });

views.py

form = ThisForm(request.POST, request.FILES)

if form.is_valid():
    text = form.cleaned_data.get("text")
    example_image = request.FILES['example_image']

1
Как это может улучшить любой из ответов, которые уже даны? Также в этом ответе упоминается файл views.py, который является Django и не имеет ничего общего с вопросом.
Диркгротен

6
Поскольку проблема проявляется сравнимо при использовании Django, и если вы используете Django, здесь нет особого направления в отношении ее решения. Я думал, что предложу активную помощь на случай, если кто-нибудь приедет сюда, как я сделал в будущем. Тяжелый день?
Jay

9

Используйте FormData. Это работает очень хорошо :-) ...

var jform = new FormData();
jform.append('user',$('#user').val());
jform.append('image',$('#image').get(0).files[0]); // Here's the important bit

$.ajax({
    url: '/your-form-processing-page-url-here',
    type: 'POST',
    data: jform,
    dataType: 'json',
    mimeType: 'multipart/form-data', // this too
    contentType: false,
    cache: false,
    processData: false,
    success: function(data, status, jqXHR){
        alert('Hooray! All is well.');
        console.log(data);
        console.log(status);
        console.log(jqXHR);

    },
    error: function(jqXHR,status,error){
        // Hopefully we should never reach here
        console.log(jqXHR);
        console.log(status);
        console.log(error);
    }
});

вот что: ('user', $ ('# user'). val ());
rahim.nagori

текстовое поле с id = "user" добавляется в форму @ rahim.nagori
Alp Altunel

1
Более прямой подход: var jform = new FormData ($ ('form'). Get (0));
Андре Моралес

хорошо, спасибо, попробую это в следующий раз, когда я использую FormData
delboy1978uk

7

Я реализовал выбор нескольких файлов с мгновенным предварительным просмотром и загрузкой после удаления ненужных файлов из предварительного просмотра через ajax.

Подробную документацию можно найти здесь: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html

Демо: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/

jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/

Javascript:

    $(document).ready(function(){
    $('form').submit(function(ev){
        $('.overlay').show();
        $(window).scrollTop(0);
        return upload_images_selected(ev, ev.target);
    })
})
function add_new_file_uploader(addBtn) {
    var currentRow = $(addBtn).parent().parent();
    var newRow = $(currentRow).clone();
    $(newRow).find('.previewImage, .imagePreviewTable').hide();
    $(newRow).find('.removeButton').show();
    $(newRow).find('table.imagePreviewTable').find('tr').remove();
    $(newRow).find('input.multipleImageFileInput').val('');
    $(addBtn).parent().parent().parent().append(newRow);
}

function remove_file_uploader(removeBtn) {
    $(removeBtn).parent().parent().remove();
}

function show_image_preview(file_selector) {
    //files selected using current file selector
    var files = file_selector.files;
    //Container of image previews
    var imageContainer = $(file_selector).next('table.imagePreviewTable');
    //Number of images selected
    var number_of_images = files.length;
    //Build image preview row
    var imagePreviewRow = $('<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>' +
        '<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>' +
        '</tr> ');
    //Add image preview row
    $(imageContainer).html(imagePreviewRow);
    if (number_of_images > 1) {
        for (var i =1; i<number_of_images; i++) {
            /**
             *Generate class name of the respective image container appending index of selected images, 
             *sothat we can match images selected and the one which is previewed
             */
            var newImagePreviewRow = $(imagePreviewRow).clone().removeClass('imagePreviewRow_0').addClass('imagePreviewRow_'+i);
            $(newImagePreviewRow).find('input[type="button"]').attr('imageIndex', i);
            $(imageContainer).append(newImagePreviewRow);
        }
    }
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        /**
         * Allow only images
         */
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
          continue;
        }

        /**
         * Create an image dom object dynamically
         */
        var img = document.createElement("img");

        /**
         * Get preview area of the image
         */
        var preview = $(imageContainer).find('tr.imagePreviewRow_'+i).find('td:first');

        /**
         * Append preview of selected image to the corresponding container
         */
        preview.append(img); 

        /**
         * Set style of appended preview(Can be done via css also)
         */
        preview.find('img').addClass('previewImage').css({'max-width': '500px', 'max-height': '500px'});

        /**
         * Initialize file reader
         */
        var reader = new FileReader();
        /**
         * Onload event of file reader assign target image to the preview
         */
        reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
        /**
         * Initiate read
         */
        reader.readAsDataURL(file);
    }
    /**
     * Show preview
     */
    $(imageContainer).show();
}

function remove_selected_image(close_button)
{
    /**
     * Remove this image from preview
     */
    var imageIndex = $(close_button).attr('imageindex');
    $(close_button).parents('.imagePreviewRow_' + imageIndex).remove();
}

function upload_images_selected(event, formObj)
{
    event.preventDefault();
    //Get number of images
    var imageCount = $('.previewImage').length;
    //Get all multi select inputs
    var fileInputs = document.querySelectorAll('.multipleImageFileInput');
    //Url where the image is to be uploaded
    var url= "/upload-directory/";
    //Get number of inputs
    var number_of_inputs = $(fileInputs).length; 
    var inputCount = 0;

    //Iterate through each file selector input
    $(fileInputs).each(function(index, input){

        fileList = input.files;
        // Create a new FormData object.
        var formData = new FormData();
        //Extra parameters can be added to the form data object
        formData.append('bulk_upload', '1');
        formData.append('username', $('input[name="username"]').val());
        //Iterate throug each images selected by each file selector and find if the image is present in the preview
        for (var i = 0; i < fileList.length; i++) {
            if ($(input).next('.imagePreviewTable').find('.imagePreviewRow_'+i).length != 0) {
                var file = fileList[i];
                // Check the file type.
                if (!file.type.match('image.*')) {
                    continue;
                }
                // Add the file to the request.
                formData.append('image_uploader_multiple[' +(inputCount++)+ ']', file, file.name);
            }
        }
        // Set up the request.
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                var jsonResponse = JSON.parse(xhr.responseText);
                if (jsonResponse.status == 1) {
                    $(jsonResponse.file_info).each(function(){
                        //Iterate through response and find data corresponding to each file uploaded
                        var uploaded_file_name = this.original;
                        var saved_file_name = this.target;
                        var file_name_input = '<input type="hidden" class="image_name" name="image_names[]" value="' +saved_file_name+ '" />';
                        file_info_container.append(file_name_input);

                        imageCount--;
                    })
                    //Decrement count of inputs to find all images selected by all multi select are uploaded
                    number_of_inputs--;
                    if(number_of_inputs == 0) {
                        //All images selected by each file selector is uploaded
                        //Do necessary acteion post upload
                        $('.overlay').hide();
                    }
                } else {
                    if (typeof jsonResponse.error_field_name != 'undefined') {
                        //Do appropriate error action
                    } else {
                        alert(jsonResponse.message);
                    }
                    $('.overlay').hide();
                    event.preventDefault();
                    return false;
                }
            } else {
                /*alert('Something went wrong!');*/
                $('.overlay').hide();
                event.preventDefault();
            }
        };
        xhr.send(formData);
    })

    return false;
}

@Bhargav: Пожалуйста, смотрите сообщение в блоге для объяснений: goo.gl/umgFFy . Если у вас все еще есть какие-либо вопросы, возвращайтесь ко мне Спасибо
Има

7

Я обработал их в простом коде. Вы можете скачать рабочую демо здесь

Для вашего случая это очень возможно. Я расскажу вам шаг за шагом, как вы можете загрузить файл на сервер, используя AJAX jquery.

Сначала давайте создадим файл HTML, чтобы добавить следующий элемент файла формы, как показано ниже.

<form action="" id="formContent" method="post" enctype="multipart/form-data" >
         <input  type="file" name="file"  required id="upload">
         <button class="submitI" >Upload Image</button> 
</form>

Во-вторых, создайте файл jquery.js и добавьте следующий код для обработки отправки нашего файла на сервер.

    $("#formContent").submit(function(e){
        e.preventDefault();

    var formdata = new FormData(this);

        $.ajax({
            url: "ajax_upload_image.php",
            type: "POST",
            data: formdata,
            mimeTypes:"multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            success: function(){
                alert("file successfully submitted");
            },error: function(){
                alert("okey");
            }
         });
      });
    });

Вот и все. Посмотреть больше


7

Использование FormData - это путь, на который указывают многие ответы. Вот немного кода, который отлично подходит для этой цели. Я также согласен с комментарием о вложении блоков ajax для выполнения сложных обстоятельств. Включая e.PreventDefault (); по моему опыту делает код более кросс-браузер совместимым.

    $('#UploadB1').click(function(e){        
    e.preventDefault();

    if (!fileupload.valid()) {
        return false;            
    }

    var myformData = new FormData();        
    myformData.append('file', $('#uploadFile')[0].files[0]);

    $("#UpdateMessage5").html("Uploading file ....");
    $("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right");

    myformData.append('mode', 'fileUpload');
    myformData.append('myid', $('#myid').val());
    myformData.append('type', $('#fileType').val());
    //formData.append('myfile', file, file.name); 

    $.ajax({
        url: 'include/fetch.php',
        method: 'post',
        processData: false,
        contentType: false,
        cache: false,
        data: myformData,
        enctype: 'multipart/form-data',
        success: function(response){
            $("#UpdateMessage5").html(response); //.delay(2000).hide(1); 
            $("#UpdateMessage5").css("background","");

            console.log("file successfully submitted");
        },error: function(){
            console.log("not okay");
        }
    });
});

это запускает форму через jquery validate ... if (! fileupload.valid ()) {return false; }
Майк Волмар,

7

Используя чистый JS это проще

async function saveFile(inp) 
{
    let formData = new FormData();           
    formData.append("file", inp.files[0]);
    await fetch('/upload/somedata', {method: "POST", body: formData});    
    alert('success');
}
<input type="file" onchange="saveFile(this)" >

  • На стороне сервера вы можете прочитать оригинальное имя файла (и другую информацию), которое автоматически включается в запрос.
  • Вам НЕ нужно устанавливать заголовок «Content-Type» на «multipart / form-data», браузер установит его автоматически
  • Это решение должно работать на всех основных браузерах.

Вот более развитый фрагмент с обработкой ошибок и дополнительной отправкой JSON


6

Да, вы можете, просто используйте javascript, чтобы получить файл, убедившись, что вы читаете файл как URL-адрес данных. Разберите материал перед base64, чтобы фактически получить данные, закодированные в base 64, а затем, если вы используете php или действительно какой-либо внутренний язык, вы можете декодировать данные base 64 и сохранить в файл, как показано ниже

Javascript:
var reader = new FileReader();
reader.onloadend = function ()
{
  dataToBeSent = reader.result.split("base64,")[1];
  $.post(url, {data:dataToBeSent});
}
reader.readAsDataURL(this.files[0]);


PHP:
    file_put_contents('my.pdf', base64_decode($_POST["data"]));

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


file_put_contents ($ fname, file_get_contents ($ _ POST ['data'])); file_get_contents имеет дело с декодированием и данными: // header
Nande

5
<html>
    <head>
        <title>Ajax file upload</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function (e) {
            $("#uploadimage").on('submit', (function(e) {
            e.preventDefault();
                    $.ajax({
                    url: "upload.php", // Url to which the request is send
                            type: "POST", // Type of request to be send, called as method
                            data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                            contentType: false, // The content type used when sending data to the server.
                            cache: false, // To unable request pages to be cached
                            processData:false, // To send DOMDocument or non processed data file it is set to false
                            success: function(data)   // A function to be called if request succeeds
                            {
                            alert(data);
                            }
                    });
            }));
        </script>
    </head>
    <body>
        <div class="main">
            <h1>Ajax Image Upload</h1><br/>
            <hr>
            <form id="uploadimage" action="" method="post" enctype="multipart/form-data">
                <div id="image_preview"><img id="previewing" src="noimage.png" /></div>
                <hr id="line">
                <div id="selectImage">
                    <label>Select Your Image</label><br/>
                    <input type="file" name="file" id="file" required />
                    <input type="submit" value="Upload" class="submit" />
                </div>
            </form>
        </div>
    </body>
</html>

4

Вы можете использовать метод ajaxSubmit следующим образом :), когда вы выбираете файл, который нужно загрузить на сервер, отправьте его на сервер :)

$(document).ready(function () {
    var options = {
    target: '#output',   // target element(s) to be updated with server response
    timeout: 30000,
    error: function (jqXHR, textStatus) {
            $('#output').html('have any error');
            return false;
        }
    },
    success: afterSuccess,  // post-submit callback
    resetForm: true
            // reset the form after successful submit
};

$('#idOfInputFile').on('change', function () {
    $('#idOfForm').ajaxSubmit(options);
    // always return false to prevent standard browser submit and page navigation
    return false;
});
});

2
Я полагаю, вы говорите о плагине jquery form . Это действительно лучший вариант, за исключением отсутствия деталей в вашем ответе.
Фотанус

@fotanus ты прав! этот скрипт должен использовать плагин формы jquery для отправки использования метода ajaxSubmit, который определяет в плагине формы jquery
Quy Le

4

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

var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);

Затем отправьте объект данных формы на сервер.

Мы также можем добавить файл или блоб непосредственно к объекту FormData.

data.append("myfile", myBlob, "filename.txt");

3

Если вы хотите загрузить файл с помощью AJAX, вот код, который вы можете использовать для загрузки файла.

$(document).ready(function() {
    var options = { 
                beforeSubmit:  showRequest,
        success:       showResponse,
        dataType: 'json' 
        }; 
    $('body').delegate('#image','change', function(){
        $('#upload').ajaxForm(options).submit();        
    }); 
});     
function showRequest(formData, jqForm, options) { 
    $("#validation-errors").hide().empty();
    $("#output").css('display','none');
    return true; 
} 
function showResponse(response, statusText, xhr, $form)  { 
    if(response.success == false)
    {
        var arr = response.errors;
        $.each(arr, function(index, value)
        {
            if (value.length != 0)
            {
                $("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>');
            }
        });
        $("#validation-errors").show();
    } else {
         $("#output").html("<img src='"+response.file+"' />");
         $("#output").css('display','block');
    }
}

Вот HTML-код для загрузки файла

<form class="form-horizontal" id="upload" enctype="multipart/form-data" method="post" action="upload/image'" autocomplete="off">
    <input type="file" name="image" id="image" /> 
</form>

3

Чтобы получить все входные данные формы, включая type = "file", вам нужно использовать объект FormData . вы сможете увидеть содержимое formData в отладчике -> сеть -> заголовки после того, как отправите форму.

var url = "YOUR_URL";

var form = $('#YOUR_FORM_ID')[0];
var formData = new FormData(form);


$.ajax(url, {
    method: 'post',
    processData: false,
    contentType: false,
    data: formData
}).done(function(data){
    if (data.success){ 
        alert("Files uploaded");
    } else {
        alert("Error while uploading the files");
    }
}).fail(function(data){
    console.log(data);
    alert("Error while uploading the files");
});

2
var dataform = new FormData($("#myform")[0]);
//console.log(dataform);
$.ajax({
    url: 'url',
    type: 'POST',
    data: dataform,
    async: false,
    success: function(res) {
        response data;
    },
    cache: false,
    contentType: false,
    processData: false
});

5
Вы можете улучшить свой ответ, добавив некоторые детали
SR

1

Вот идея, о которой я думал:

Have an iframe on page and have a referencer.

Иметь форму, в которой вы перемещаете элемент INPUT: File в.

Form:  A processing page AND a target of the FRAME.

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

data:image/png;base64,asdfasdfasdfasdfa

и страница загружается.

Я считаю, что это работает для меня, и в зависимости вы можете сделать что-то вроде:

.aftersubmit(function(){
    stopPropigation()// or some other code which would prevent a refresh.
});

Я не вижу, как это улучшает любой другой ответ, данный ранее. Также это распространение, а не распространение! ;)
JDuarteDJ
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.