1

以下の HTML で見られるように、JavaScript (JQ や追加ライブラリではなく) でより柔軟な方法を探しています。

<form action="images.php" method="post" enctype="multipart/form-data">
    <label for="file">Filename:</label>
    <input type="file" name="file" id="file"><br>
    <input type="submit" name="submit" value="Submit">
</form>

JavaScript では投稿メッセージ本文に追加のパラメーターも発行できるため、JavaScript でそれが必要です。次のことを思い出させる何かをしたい(部分的に擬似コード):

HTML:

<a onclick=addImage()> Add your photo </a>

JavaScript:

function addImage(){

var image = <functionality to open file browser to choose image to send>

var xmlhttp;



if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       //page.reload();
    }
}


   xmlhttp.open("POST",urlPHP + "images.php",true);
   xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xmlhttp.send(image);


}
4

1 に答える 1

0

ソースを提供する多くのデモがあります。

ドラッグ アンド ドロップの例: http://html5demos.com/file-api

フォーム例: http://www.script-tutorials.com/pure-html5-file-upload/

古いブラウザでは、JS 以外のものを使用する必要があることに注意してください。

于 2013-07-07T15:01:56.410 に答える