jQuery Ajaxファイルのアップロード


755

次のjQueryコードを使用して、ajaxリクエストのPOSTメソッドを使用してファイルをアップロードできますか?

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

可能であれば、data一部を埋める必要がありますか?それは正しい方法ですか?ファイルをサーバー側にPOSTするだけです。

私はググググしてきましたが、私が見つけたのはプラグインで、計画では使用したくありません。少なくとも今のところは。


Ajaxはファイルのアップロードをサポートしていません。代わりにiframeを使用してください
antyrat


回答:


596

AJAXを介してファイルをアップロードすることはできません
を使用してページを更新せずにファイルをアップロードできますIFrame
詳細はこちらで確認できます


更新

XHR2では、AJAXによるファイルのアップロードがサポートされています。たとえば、FormDataオブジェクトを使用しますが、残念ながら、すべての/古いブラウザではサポートされていません。

FormData サポートは、次のデスクトップブラウザバージョンから始まります。

  • IE 10以降
  • Firefox 4.0以降
  • Chrome 7以降
  • Safari 5以降
  • Opera 12以降

詳細については、 MDNリンクを


41
サポートされていない特定のブラウザのリストを次に示します。caniuse.com / #search=FormDataまた、これはテストしていませんが、FormDataのポリフィルですgist.github.com/3120320
Ryan White

152
特に、リンクを読むのが面倒な人にとっては、IE <10はそうではありません。
ケビン

22
@Synexisいいえ。すべてのIEは22%の世界規模の市場シェアと27%の米国のみを持ち、急速に低下しているため、これ以上長く待つ必要はありません。おそらく70歳以上の人でしょう。したがって、開発者がIEに何をしなければならないかを指示するIEは、形を整えるか、競争から抜け出す必要があります。
Drew Calder 14

30
@DrewCalderほとんどのIEユーザーは会社のポリシーにより、使用するブラウザーを選択できないオフィスワーカーです。年齢とは関係ないと思います。70歳を超えるほとんどの人が、代わりに子孫にChromeまたはFFをインストールさ
せると思い

3
このリンクは、最低限のことを理解するのに本当に役立ちました。xhrリクエストを使用する必要はありませんでした。ajaxを使用する場合は、必ずに設定しenctype"form/multipart"ください。
2015

316

iframeは、ajaxを介してファイルをアップロードするために必要なくなりました。最近自分でやった。これらのページをチェックしてください:

AJAXおよびjQueryでのHTML5ファイルのアップロードの使用

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コード

<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
多かれ少なかれ、コードを直接コピーして使用できます。一部のID名とクラス名を変更するだけです。どんな習慣もあなた次第です。
Ziinloader

4
myXhrは、名前、サイズ、タイプだけでなく、グローバルなようです。また、「xhr」を使用してオブジェクトを作成し、それを変更するよりも、「beforeSend」を使用して、すでに作成されているXMLHttpRequestオブジェクトを拡張する方が適切です。
ワット、2012

8
@Ziinloaderのようにそれを使用できるとは思いません。含まれていないローカルメソッドを使用しています:writer(catchFile)。なにwriter()
tandrewnichols 2013年

4
データにアップロードするファイルとともにいくつかのフィールドが含まれている場合はどうなりますか?
raju 2014

2
@Ziinloaderこれは非常に便利な例で、何度も戻ってメンテナンスを行ってきたようです。本当に、私が与える1つの賛成票よりもはるかに価値のある答えです。
通常のジョー

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]);戻りundefinedconsole.log(formData) 何もない_proto_
Yakob Ubaidi

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); } });
TARKUS 2017年

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/...は
ブラウンマン・リヴァイヴァル

19
$(this)[0] is this
machineaddict

2
投稿されたファイルのサーバー上のパラメーターは何ですか?サーバー部分を投稿してください。
FrenkyB

@FrenkyBなど-サーバー上のファイル(PHP)は$ _POST変数に保存されません-それらは$ _FILES変数に保存されます。この場合、「csv」は入力タグの名前属性であるため、$ _ FILES ["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,なぜこれを取得しているので、コードをそのままコピーして貼り付けてください
ブラウンマンリバイバル2015

2
@HogRider-エラーメッセージをGoogleに送信した場合、これは最初の結果です:stackoverflow.com/questions/10752055/…Webfile://サーバーを使用するのではなく、を介してローカルでWebページにアクセスしていますか?余談ですが、最初にコードを理解せずにコードを盲目的に単純にコピーアンドペーストすることはベストプラクティスではありません。コードを使用する前に、コードを1行ずつ見て、何が起こっているのかを理解することをお勧めします。
colincameron 2015年

@colincameron私が一行ずつitを通過したいくつかのことを明確にしてくれてありがとう、私はあまり理解していないので、誰かが私の疑問を明確にするために質問しました。私は正確にはローカルのxamppを使用しています。明確にできる質問をしてもいいですか?
ブラウンマンリバイバル2015

@ブラウンマンリバイバル:返信が間に合わないことはわかっています。サーバーから実行するよりもファイルとしてhtmlファイルを開いたため、クロスオリジンエラーが発生しました。
Adarsh Mohan、

@AdarshMohan私はそれを正しくするために私がそれを行うことをどのように提案しますか?
ブラウンマンリバイバル

31

AJAXのアップロードは確かに可能XMLHttpRequest()です。iframeは必要ありません。アップロードの進行状況を表示できます。

詳細については、https://stackoverflow.com/a/4943774/873282に回答して、jQuery Upload ProgressおよびAJAX file uploadに質問してください


24
残念ながらIE <10はこれをサポートしていません。
Sasha Chedygov

1
回答として別のページを参照するだけの場合は、投票して、dupkucateとして閉じるか、質問の下にコメントを残すことができます。この投稿は回答ではありません。この種の投稿は、担当者を養う試みのように見えます。
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>
でした

これは完全なソリューションであり、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

あなたの解決策かもしれません。


$オブジェクトのアップロードメソッドはどこにありますか、上記のリンクは存在しません
クールな


2
回答を投稿していただきありがとうございます。セルフプロモーションに関するFAQをよくお読みください。また、独自のサイト/製品にリンクするたびに免責事項を投稿する必要があることにも注意してください。
アンドリューバーバー

13
  • 非表示のiframeを使用して、フォームのターゲットをそのiframeの名前に設定します。このように、フォームが送信されると、iframeのみが更新されます。
  • 応答を解析するためのイベントハンドラーをiframeのロードイベントに登録します。

私のブログ投稿の詳細:http : //blog.manki.in/2011/08/ajax-fie-upload.html


可能な場合はiframeを使用しないでください
Bhargav Nanekalva

@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;    
});

編集: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
これにより、すでに与えられた回答がどのように改善されますか?また、この回答はDjangoであるviews.pyファイルについて言及しており、質問とは関係ありません。
dirkgroten

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

より直接的なアプローチ:var jform = new FormData($( 'form')。get(0));
アンドレモラレス

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。それでも質問がある場合は、私に返信してください。ありがとう
Ima

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;を介してフォームを実行します。}
マイクボルマー2018年

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は、デコードとdata://ヘッダーを処理します
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 フォームプラグインについて話していると思います。回答の詳細が不足していることを除けば、ここは本当に最良の選択肢です。
fotanus 14

@fotanusあなたは正しい!そのスクリプトは、jqueryフォームプラグインを使用して、jqueryフォームプラグインで定義された使用メソッドajaxSubmitを送信する必要があります
Quy Le

4

ユーザーがjqueryを使用してフォームの一部として送信したファイルをアップロードするには、以下のコードに従ってください:

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

次に、フォームデータオブジェクトをサーバーに送信します。

FileまたはBlobを直接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 2018
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.