JavaScript：ファイルをアップロード

190

ページにこの要素があるとしましょう：

<input id="image-file" type="file" />

これにより、WebページのユーザーがブラウザーのOSの[ファイルを開く...]ダイアログでファイルを選択できるボタンが作成されます。

ユーザーが上記のボタンをクリックして、ダイアログでファイルを選択し、「OK」ボタンをクリックしてダイアログを閉じたとします。

選択したファイル名は次の場所に保存されます。

document.getElementById("image-file").value

ここで、サーバーがURL "/ upload / image"でマルチパートPOSTを処理するとします。

「/ upload / image」にファイルを送信するにはどうすればよいですか？

また、ファイルのアップロードが完了したことを通知する方法を教えてください。

javascript file-upload

— YummyBánhMì
ソース

JavaScriptはサーバーサイドであるため、アップロードを処理していません。サーバー側のスクリプトはファイルを受け取り、それを移動します。一時フォルダーから目的のフォルダーへのphpの場合。

— 爆弾2011

私はここでPHPを使用した素晴らしい解決策を見つけました

— mld

問題はjQueryではなくPOJS（プレーンな古いJavaScript）に関するものであるため、再開することに投票しました。

— e2-e4 2016

回答:

ajaxを使用してファイルをアップロードする場合を除き、フォームをに送信してください/upload/image。

<form enctype="multipart/form-data" action="/upload/image" method="post">
    <input id="image-file" type="file" />
</form>

画像をバックグラウンドでアップロードしたい場合（フォーム全体を送信せずに）、ajaxを使用できます。

— マットボール
ソース

または、src = ""内に画像アップローダースクリプトを含むiframe 0x0サイズと、target = "iframeId"を使用してフォームを投稿し、jQueryなどを使用してバインドできるiframe src .loadイベントで結果を読み取ります。

— ドミトリー

これは、参照、最近はJavascriptとAjaxを経由してupvoteすることが実際に可能です：stackoverflow.com/a/10811427/694469は（私はdownvoteしませんでした）。

— KajMagnus 14

@KajMagnus、あなたはおそらく「アップロード」を意味していましたが、誤って「賛成」と言っていました

— Samuel Allan

純粋なJS

オプションでawait-try-catchでフェッチを使用できます

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();

formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

コードスニペットを表示

async function SavePhoto(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}

<input id="image-file" type="file" onchange="SavePhoto(this)" >
<br><br>
Before selecting the file open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

<br><br>
(in stack overflow snippets there is problem with error handling, however in <a href="https://jsfiddle.net/Lamik/b8ed5x3y/5/">jsfiddle version</a> for 404 errors 4xx/5xx are <a href="https://stackoverflow.com/a/33355142/860099">not throwing</a> at all but we can read response status which contains code)

スニペットを展開

古い学校のアプローチ-XHR

let photo = document.getElementById("image-file").files[0];  // file from input
let req = new XMLHttpRequest();
let formData = new FormData();

formData.append("photo", photo);                                
req.open("POST", '/upload/image');
req.send(formData);

コードスニペットを表示

function SavePhoto(e) 
{
    let user = { name:'john', age:34 };
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    let photo = e.files[0];      
    
    formData.append("user", JSON.stringify(user));   
    formData.append("photo", photo);
    
    xhr.onreadystatechange = state => { console.log(xhr.status); } // err handling
    xhr.open("POST", '/upload/image');    
    xhr.send(formData);
}

<input id="image-file" type="file" onchange="SavePhoto(this)" >
<br><br>
Choose file and open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

<br><br>
(the stack overflow snippets, has some problem with error handling - the xhr.status is zero (instead of 404) which is similar to situation when we run script from file on <a href="https://stackoverflow.com/a/10173639/860099">local disc</a> - so I provide also js fiddle version which shows proper http error code <a href="https://jsfiddle.net/Lamik/k6jtq3uh/2/">here</a>)

スニペットを展開

概要

サーバー側では、filenameformDataパラメータでブラウザが要求するために自動的に含まれる元のファイル名（およびその他の情報）を読み取ることができます。
要求ヘッダーContent-Typeをに設定する必要はありませんmultipart/form-data-これはブラウザーによって自動的に設定されます。
代わりに、の/upload/imageような完全なアドレスを使用できますhttp://.../upload/image。
単一のリクエストで多くのファイルを送信する場合は、multiple属性を使用し<input multiple type=... />、選択したすべてのファイルを同様の方法でformDataに添付します（例：photo2=...files[2];... formData.append("photo2", photo2);）
たとえばlet user = {name:'john', age:34}、次のようにリクエストする追加のデータ（json）を含めることができます。formData.append("user", JSON.stringify(user));
このソリューションは、すべての主要なブラウザで機能するはずです。

— カミル・キエチェフスキ
ソース

私のために完璧に働きます。

— Trieu Nguyen

formData === form submitenctype="multipart/form-data"

— xgqfrms

エラーが発生しますnet::ERR_ABORTED 405 (Method Not Allowed)

— Hidayt Rahman

@HidaytRahmanこのエラーは通常、サーバがURLのPOSTメソッドを実装していない場合に発生します

— KamilKiełczewski

奇妙な-あなたの見出しに従って、私はもはやサーバーを必要としないと思っていました：D

— Hidayt Rahman