0

ユーザーがアップロードするファイルを選択できるように、ウェブサイトに入力があります

<input type="file" name="file" id="file" />

ページの最後に、JavaScript 関数を呼び出すボタンがあります。この関数は、ユーザーがアップロードするファイルを指定したかどうかを確認する必要があります。指定されている場合は、ファイル (php) をアップロードしてファイル名を取得します。

javascript からファイル入力フォームにアクセスするにはどうすればよいですか? つまり、「upload_file.php」を呼び出す「投稿」ファイル情報を取得するにはどうすればよいですか。

ps。JQueryは使わないほうがいい

編集 - 私はこれを試しましたが、うまくいかないようです

function uploadFile(){
    var files = document.getElementById('file');
    var file = files.files[0];

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
        alert(xmlhttp.responseText);
        }
    }
    xmlhttp.open("POST","uploadfile.php",true);
    xmlhttp.setRequestHeader("Content-type", "multipart/form-data")
    var formData = new FormData();
    formData.append("thefile", file);
    xmlhttp.send(formData);
}

php:

<?php

echo "Upload: " . $_FILES["thefile"]["name"] . "<br />";
echo "Type: " . $_FILES["thefile"]["type"] . "<br />";
echo "Size: " . ($_FILES["thefile"]["size"] / 1024) . " Kb<br />";
echo "Temp file: " . $_FILES["thefile"]["tmp_name"] . "<br />";

?>

ファイル名が空白、タイプが空白、サイズが 0 などのアラートが表示されます...

4

6 に答える 6

0

他の要素と同様に、DOM を介してアクセスできます。唯一の制限は、セキュリティ上の理由から変更できないことです。

于 2012-07-17T21:58:44.723 に答える
0

http://www.simonerodriguez.com/ajax-form-submit-example/

ajax の投稿については、このリンクを確認してください。通常のフォームと同じように投稿するだけで、余計な手間はかかりません。

于 2012-07-17T22:00:49.437 に答える
0

HTML5 ファイル API を検討しましたか?

関連する StackOverFlow:

Html 5 ファイルのアップロード

于 2012-07-17T22:01:06.383 に答える
0

以下を置き換えることで私の問題を解決しました：

    xmlhttp.setRequestHeader("Content-type", "multipart/form-data")

と

     xmlhttp.setRequestHeader("enctype", "multipart/form-data")
于 2012-07-29T20:01:39.240 に答える
0

AJAXを介してこれを行うと、次の問題が発生します（IEを除く）。

1) IEでは不可能です。誰かが道を見つけたら、私に声をかけてください。私がしたことは、通常の方法でフォームを送信し、更新されたページを返すことです。

2) FF の場合 (そして、メモリが適切な Opera と Safari を提供する場合)、次のスニペットが機能します

var fileTag = document.getElementById('id for input element');
var file = fileTag.files[0];

// You can check the type here by checking the string file.type

var data = file.getAsBinary(); // Or getAsText()

3) Chrome の場合、このコードを使用します

var fileTag = document.getElementById('id for input element');
var file = fileTag.files[0];
var reader = new FileReader();
reader.onload = function() { /* Use reader.result as it has loaded */  };
reader.onerror = function(e) { /*  and error occurred - handle it */ };
reader.readAsText(file); // I think there is also a function readAsBinary.

ファイルの内容を取得したら、AJAX を使用して投稿できます。

于 2012-07-17T22:14:23.757 に答える
0

次のようなものが必要だと思います： http://jsfiddle.net/kHQLp/4/

于 2012-07-17T22:07:19.043 に答える