2016-11-24 9 views
0

これは私のHTMLとjavascriptです。画像アップロードjavascriptを使用していますか?

javascriptを使用して画像をアップロードしようとしています。

私はjqueryを使っていくつかの例を見つけましたが、以下のこの関数を同じように変更することができれば幸いです。

画像アップロードスクリプトは、フォームが正常に投稿されたときに機能するPHPスクリプトですが、この機能を使用すると画像をPHPスクリプトに送信しません。 $ _FILESは空です。 この機能を変更して画像を送信するにはどうすればよいですか?検証する

<html><head> 
<script type="text/javascript"> 

function jax( ){ 

    pd = document.getElementById("pd").innerHTML; 
    i = document.getElementById("i").value; 

    url= "ajax.php"; //?act=uploadPic&title=" + pd + "&i=" + i; 
    q="act=uploadPic&title=" + pd + "&i=" + i; 

    var ajaxRequest; 
    try{ 
     ajaxRequest = new XMLHttpRequest(); 
    } 
    catch (e){ 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } 
     catch (e) { 
      try{ 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      catch (e){ 
       alert("Your browser does not support ajax. Allow Active scriptting in internet settings."); return false; 
      } 
     } 
    } 
    ajaxRequest.onreadystatechange= function(){ 
     if(ajaxRequest.readyState == 4){ 
      r =ajaxRequest.responseText; 
      alert(r); 
     } 
    } 
    ajaxRequest.open("POST", url, true); 
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    ajaxRequest.send(q); 
}//func 

</script> 

</head> 
<body> 
    <form action="upload.php" method="post" enctype="multipart/form-data"> 
     <p> Title: <input type="text" name="pd" id="pd" value=" Title here " /> 
     <p> Image: <input type="file" name="i" id="i" /> 
     <p> <button onclick=" jax( ) "> Upload </button> 
    </form> 
</body> 
</html> 

PHPスクリプト画像が送信された場合:

ajax.php
<?php print_r($_FILES); ?> 

答えて

0

これは私の関数であるが、IE8より低い作業することはできません。

function jax(){ 
     url= "ajax.php?act=uploadPic"; 
     var formData = new FormData(document.forms[0]); 
     var xhr = new XMLHttpRequest(); 
     xhr.open('post',url,true); 
     xhr.onreadystatechange = function(){ 
      if (xhr.readyState == 4) { 
       if (xhr.status == 200) { 
        console.log(xhr.responseText); 
       } 
      } 
     } 

     xhr.addEventListener('progress',function(e){ 
      if (e.lengthComputable) { 
       console.log(e.loaded+'/'+e.total); 
      } 
     },false); 
     xhr.send(formData); 
} 
+0

私が手IE8のこのエラーメッセージ: 'FormData'は定義されていません。&firefoxでは、ajaxアップロードボタンの代わりに送信ボタンがあるようにフォームを正常に送信します –