2016-11-24 138 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上傳按鈕 –