图片上传阿贾克斯不工作 [英] Image upload ajax don't work

问题描述

我试图做一个图片文件上传与阿贾克斯而无需刷新页面，但该文件将不会被移动到指定的文件夹我的表现非常基本的文件上传的PHP code，以避免错误，后来

 如果（$ _ SERVER [REQUEST_METHOD] ==POST）{
    $文件= $ _FILES [上传]
    $ TARGET_DIR =user_image /;
    $ TARGET_FILE = $ TARGET_DIR。基本名（$ _ FILES [上传] [名称]）;
    move_uploaded_file（$ _ FILES [上传] [tmp_name的值]，$ TARGET_FILE）;
}
 

我的Ajax和JavaScript都工作正常，但没有对目标文件user_image没有图像/

 ＆LT;脚本的charset =UTF-8＆GT;
        函数_（id）的{
            返回的document.getElementById（ID）;
        }
        _（file_upload）的onchange =功能（）{
            // _（file_upload）提交（）;
            VAR ID = _（USER_ID）的innerHTML。
            var文件= _（file_upload）的文件[0]。
            VAR FORMDATA =新FORMDATA（）;
            formdata.append（文件1，文件）;
            VAR阿贾克斯=新XMLHtt prequest（）;
            ajax.onreadystatechange =
            功能（）{
                如果（ajax.readyState == 4和＆安培; ajax.status == 200）{
                   _（1）删除（）。
                    VAR IMG = document.createElement方法（'IMG'）;
                    VAR first_path ='/ user_image /';
                    VAR路径= first_path.concat（ID，PNG。）;
                    img.setAttribute（ALT，用户插入图片）;
                    img.setAttribute（'身份证'，'一'）;
                    img.setAttribute（SRC，路径）;
                    。_（用户）的appendChild（IMG）;
                    警报（结束）;
                }
                其他{
                    _（1）删除（）。
                    VAR IMG = document.createElement方法（'IMG'）;
                    img.setAttribute（'src'中，'/ IMG / loading.gif'）;
                    img.setAttribute（ALT，用户插入图片）;
                    img.setAttribute（'身份证'，'一'）;
                    。_（用户）的appendChild（IMG）;
                }
            }
            ajax.open（POST，upload_image.php）;
            ajax.send（FORMDATA）;
        };

    ＆LT; / SCRIPT＆GT;
 

解决方案

您需要更改请求头，使这项工作。

  ajax.setRequestHeader（内容型，多部分/表单数据）;
 

I am trying to do an image file upload with ajax without refreshing the page but the file won't be moved to the specified folder i did very basic file upload php code to avoid errors and develop it later

if($_SERVER["REQUEST_METHOD"]=="POST"){
    $file = $_FILES["uploaded"]
    $target_dir = "user_image/";
    $target_file = $target_dir . basename($_FILES["uploaded"]["name"]);
    move_uploaded_file($_FILES["uploaded"]["tmp_name"],$target_file);
}

My ajax and JavaScript are working fine but there is no image on the target file user_image/

    <script charset="UTF-8">
        function _(id){
            return document.getElementById(id);
        }
        _("file_upload").onchange = function() {
            //_("file_upload").submit();
            var id = _("user_id").innerHTML;
            var file = _("file_upload").files[0];
            var formdata = new FormData();
            formdata.append("file1",file);
            var ajax = new XMLHttpRequest();
            ajax.onreadystatechange =
            function(){
                if(ajax.readyState==4 && ajax.status==200){
                   _("one").remove();
                    var img = document.createElement('img');
                    var first_path = '/user_image/';
                    var path = first_path.concat(id,'.png');
                    img.setAttribute('alt','User image');
                    img.setAttribute('id','one');                        
                    img.setAttribute('src',path);
                    _("user").appendChild(img);  
                    alert("end");
                }    
                else{
                    _("one").remove();
                    var img = document.createElement('img');
                    img.setAttribute('src','/img/loading.gif');
                    img.setAttribute('alt','User image');
                    img.setAttribute('id','one');
                    _("user").appendChild(img);                        
                }
            }
            ajax.open("POST","upload_image.php");
            ajax.send(formdata);
        };

    </script>

解决方案

You need to change the request header to make this work.

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

这篇关于图片上传阿贾克斯不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！