Загрузка файла jQuery с использованием метода jQuery ajax (без плагинов)

Question

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

Моя форма загрузки выглядит следующим образом

<form action="/Member/UploadPicture" enctype="multipart/form-data" id="uploadform" method="post">
            <span>
                <div class="upload" id="imgUpl">
                    <h3>Upload profile picture</h3>
                    <div class="clear5"></div>
                    <input  type="file" name="file" id="file"  />
                    <button class="btn-bl"  id="upComplete"><span>Upload</span></button>
                </div>

            </span>
            </form>

И мой код jQuery:

  $('#upComplete').click(function () {
            $('#up').hide();
            $('#upRes').show();

            var form = $("#uploadform");

            $.ajax({
                type: "POST",
                url: "/Member/UploadPicture",
                data: form.serialize(),
                success: function (data) {
                    alert(data);
                }
            });

            $.fancybox.close();
            return false;
        });

Если я открою firebug, я вижу, что метод ajax () выполняет простую форму публикации (не состоит из нескольких частей), а содержимое POST пусто

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

Большое спасибо

Answer 1

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

Конечно, вы всегда можете проверить исходный код плагина, чтобы увидеть, как он реализован, если вы не хотите его включать (он использует скрытый iFrame, поскольку файлы не могут быть загружены с помощью AJAX), но почемуесли вы можете использовать его напрямую: -)

Вот пример того, как может выглядеть ваш код:

$(function() {
    $('#uploadform').ajaxForm();
});

также сделайте кнопку загрузки кнопкой отправки:

<button class="btn-bl" id="upComplete" type="submit">
    <span>Upload</span>
</button>

Answer 2

AJAX или более подходящим образом XMLHttpRequest пока не поддерживает загрузку файлов.Есть обходные пути, такие как загрузка через <iframe>, но это довольно громоздко.Ваше время будет лучше потрачено на создание приложений, а не на переосмысление этих решений.

Но если вас интересует, как это работает внутри, то не стесняйтесь проверить исходный код некоторых плагинов, которые предлагают эту функцию.По этой ссылке можно найти очень простое объяснение - http://www.openjs.com/articles/ajax/ajax_file_upload/

По сути, вы изменяете форму target для отправки внутри <iframe>, таким образом избегая обновления страницы и имитируя AJAX, который нена самом деле, но кого это волнует - конечный пользователь не может сказать.

Минимальный пример загрузки на основе iframe может выглядеть следующим образом:

​$("#upComplete").click(function() {
    // create a dynamic iframe, or use existing one 
    var iframe = $("<iframe id='f' name='f' src=''>");
    // attach a load event to handle response/ know about completion
    iframe.load(function() { alert('complete'); });
    iframe.appendTo('body');
    // change form's target to the iframe (this is what simulates ajax)
    $('#uploadForm').attr('target', 'f');
    $('#uploadForm').submit();
});​​​​​​

Обратите внимание, что это не таклюбая обработка ответа, но просто отправляет изображение на сервер.Чтобы обработать ответ, обратный вызов должен быть написан для события iframe load.

Answer 3

На самом деле есть метод для загрузки файлов с помощью ajax (xmlhttp) с Firefox> 3 и Chrome, также возможно загружать несколько файлов без использования форм и фреймов.На самом деле я делаю плагин jQuery для этого и скоро опубликую его.Вот простой пример:

var file=$('<input type=file />').get(0).files[0];
function asyncupload(file)
{
    var xhr = new XMLHttpRequest();    
    xhr.onreadystatechange = function() 
    {  
        if (xhr.readyState == 4) 
        {  
            if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) 
            {  
                //alert(xhr.responseText);
            }  
        }  
    };  
    xhr.upload.onload=function(e)
    {
        $('div#axprogress').progressbar("option", "value", 100);;
    };  
    xhr.upload.onprogress=function(e) 
    {  
        if (e.lengthComputable) 
        {  
            var perc = Math.round((e.loaded * 100) / e.total);  
            $('div#axprogress').progressbar("option", "value", perc);
        }  
    };  

    xhr.open("POST", "upload.php?filename="+file.name,true);  
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("X-File-Name", encodeURIComponent(file.name));
    xhr.send(file);  
    return xhr;
}

Для получения файлов на стороне сервера, например php, необходимо сделать это для upload.php:

$input = fopen("php://input", "r");
$temp = tmpfile();
$realSize = stream_copy_to_stream($input, $temp);
fclose($input);

if ($realSize != $this->getSize())
    {            
    return false;
}

$target = fopen($_GET['filename'], "w");        
fseek($temp, 0, SEEK_SET);
stream_copy_to_stream($temp, $target);
fclose($target); 

Это простой пример идеи, а неполный рабочий скрипт.Надеюсь это поможет.Для получения дополнительной информации см https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Answer 4

Хотя вы можете самостоятельно создать тело запроса multipart/form-data для включения поля загрузки файла, оно не поможет вам, поскольку вы не можете прочитать файлы на стороне клиента из поля загрузки файла.

(За исключением использования интерфейса FileList , но в настоящее время это поддерживается только Firefox.)

Answer 5

   <input type="file" id="picfile" name="picf" />
       <input type="text" id="txtName" style="width: 144px;" />
  <input type="button" value=" ADD " id="btncatsave" style="width: 75px" />
 $("#btncatsave").click(function () {
var Name = $("#txtName").val();
var formData = new FormData();
var totalFiles = document.getElementById("picfile").files.length;

                    var file = document.getElementById("picfile").files[0];
                    formData.append("FileUpload", file);
                    formData.append("Name", Name);

$.ajax({
                    type: "POST",
                    url: '/Category_Subcategory/Save_Category',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (msg) {

                                 alert(msg);

                    },
                    error: function (error) {
                        alert("errror");
                    }
                });

});

 [HttpPost]
    public ActionResult Save_Category()
    {
      string Name=Request.Form[1]; 
      if (Request.Files.Count > 0)
        {
            HttpPostedFileBase file = Request.Files[0];
         }


    }