jQuery Ajax Загрузка файлов

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

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

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

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

Kamil Kiełczewski
Редактировал вопрос 5-го июля 2019 в 10:09
Программирование
file-upload javascript jquery ajax post
23-го февраля 2010 в 4:58
54 просмотров
Комментарии к вопросу (3)
Решение

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

UPDATE:

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

Поддержка FormData начинается со следующих версий браузеров для настольных компьютеров. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

Более подробную информацию смотрите в MDN link.

Комментарии (9)

Фреймы больше не требуется для передачи файлов через AJAX. Я'вэ недавно сделал это сам. Проверьте эти страницы:

https://stackoverflow.com/questions/4006520/using-html5-file-uploads-with-ajax-and-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 + "%");
};

Как использовать класс загрузить 

//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 код прогрессбар 

<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;
}
Mosh Feu
Редактировал ответ 23-го апреля 2018 в 3:01
Комментарии (16)

Аякс пост и загрузить файл можно. Я'м с помощью 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, пустой или (по частям? - $(&#39;#yourForm&#39;).сериализовать()) существующую форму, а затем прикрепить исходный файл.

Здесь больше информации:

Для процесса 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
            ));
}
Community
Редактировал ответ 23-го мая 2017 в 12:02
Комментарии (9)

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

в 

 <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>


  <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>

в

Liam
Редактировал ответ 6-го августа 2018 в 10:44
Комментарии (5)

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

Загрузка HTML:




    Image Upload Form
    <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>




        Select a file:<br>
        <input type="file" name="file" required />
        <input type="submit" value="Upload" />

    <div id="output"></div>

В случае, если вы работаете с 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";
}
?>
Musa
Редактировал ответ 17-го апреля 2016 в 3:05
Комментарии (7)

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

Подробности см: Ответ https://stackoverflow.com/a/4943774/873282 на вопрос https://stackoverflow.com/questions/4856917/jquery-upload-progress-and-ajax-file-upload.

Community
Редактировал ответ 23-го мая 2017 в 12:18
Комментарии (1)

Здесь's, как я получил эту работу:

В формате HTML

<input type="file" id="file">
Process

Яш

$('#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);
        }
    });
});

РНР

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

    // process your file

}
Комментарии (2)

В случае, если вы хотите сделать это так:

$.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

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

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

Более подробная информация в моем блоге: http://blog.manki.in/2011/08/ajax-fie-upload.html.

Комментарии (2)
$("#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;    
});

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

Комментарии (1)

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

HTML-код

 {% csrf_token %}
<textarea name='text'>
<input name='example_image'>

Яш


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

    $.ajax({ 
        type: 'post', 
        url: url,
Комментарии (2)

Я реализовал несколько Файл выберите с мгновенным предварительным просмотром и загрузки после удаления ненужных файлов с просмотром через 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
Комментарии (1)

Я занимался этим в простой код. Вы можете скачать рабочую демку с ЗДЕСЬ

В вашем случае, это очень возможно. Я проведу вас шаг за шагом, как вы можете закачать файл на сервер с помощью AJAX и jQuery.

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


         <input  type="file" name="file"  required id="upload">
         Upload Image

Во-вторых, создать 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");
            }
         });
      });
    });

Там вы сделали . Смотреть больше

Комментарии (0)

С помощью FormData-это путь, как говорят многие ответы. вот немного кода, который прекрасно работает для этой цели. Я также согласен с комментарием вложенности Аякс блоки для выполнения сложных обстоятельствах. В том числе электронной.Метод 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");
        }
    });
});
Комментарии (1)

Да, вы можете просто использовать JavaScript, чтобы получить файл, убедившись, что Вы читаете файл как URL-адрес данных. Разобрать вещи, прежде чем base64, чтобы на самом деле получить подходит 64 закодированных данных, а затем, если вы используете PHP или действительно любой язык можно расшифровать базовая 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"]));

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

Комментарии (1)


        Ajax file upload
        <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>


        <div class="main">
            <h1>Ajax Image Upload</h1><br/>
            <hr>

                <div id="image_preview"></div>
                <hr id="line">
                <div id="selectImage">
                    Select Your Image<br/>
                    <input type="file" name="file" id="file" required />
                    <input type="submit" value="Upload" class="submit" />
                </div>

        </div>
Nicomedes E.
Редактировал ответ 14-го февраля 2018 в 4:01
Комментарии (0)

Вы можете использовать метод 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, пожалуйста, следуйте ниже код :

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

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

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

data.append("myfile", myBlob, "filename.txt");
Комментарии (0)

Если вы хотите загрузить файл с помощью 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("");
         $("#output").css('display','block');
    }
}

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


    <input type="file" name="image" id="image" />
Комментарии (0)

Чтобы получить всю вашу форму ввода, в том числе тип=то"файл" Вы должны использовать объект 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");
});
Комментарии (0)