Question

这是我的HTML和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); ?>

Answer 1

这是我的功能，但不能低于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);
}

使用javascript上传图片？

1 个答案: