搜尋

首頁  >  問答  >  主體

javascript - php + ajax 無刷新的上傳圖片為啥實現不了?

#寫一個比較low的檔案上傳功能,要點選 上傳 才會上傳到伺服器。
但是經過測試,始終上傳不了,不知道是怎麼回事?下面是我的程式碼:

html

<body>
    <p class="toolbar1">
        <a href="javascript:;" id="upload" class="a-upload mr10"><input id="changeFile" type="file" name="myFiles" id="">点击这里上传文件</a>
        <p class="showFileName mr10"></p>
        <button id="uploadBtn" type="button" class="btn btn-primary">上传</button>
    </p>
</body>

php:

#
<?php 
    //做个路由 action为url中的参数
    $action = $_GET['action'];
    switch($action) {
        case 'upload_file':
            upload();
            break;
    }
    
    function upload(){
        // 获取上传的图片
        $pic = $_FILES['myFiles']['tmp_name'];
        $upload_ret = false;
    
        if($pic){
            // 上传的路径,建议写物理路径
           $uploadDir = "../upload_files";
            // 创建文件夹  
            if(!file_exists($uploadDir)){        
                mkdir($uploadDir, 0777);    
            }    
            // 用时间戳来保存图片,防止重复
            $targetFile = $uploadDir . '/' . time() . $_FILES['myFiles']['name'];    
            // 将临时文件 移动到我们指定的路径,返回上传结果
            $upload_ret = move_uploaded_file($pic, $targetFile) ? true : false;
        }
    
        return $upload_ret;
    }
?>

js:

#
$(function() {
    //上传图片
    $('#uploadBtn').on('click',function(){
        /*alert('444');*/
        uploadFiles();
    })

    function uploadFiles(){
        //上传文件接口
        var uploadUrl = "./php/data.php?action=upload_file";
        //选择的文件
        var files = document.getElementById('changeFile').files[0];
        var fileArr = [files];
        //经过调试是不进ajax的
        $.ajax({
            type:"post",
            url:uploadUrl,
            data:fileArr,
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function(data) {
                console.log(data);
            },
            error: function(data){
                        
            }
        });
    }
}

經過調試,在js這裡,是不進 ajax 的,不知道是哪裡出了問題?請幫忙,謝謝!
在php 中, $pic = $_FILES['myFiles']['tmp_name']; $pic 的值要怎麼取得?調試中我發現這個值是獲取不到的。在js中我把取得到的檔案資訊都轉為一個陣列透過ajax的post傳遞,這個陣列要怎麼傳給php呢?

大家讲道理大家讲道理2739 天前514

全部回覆(2)我來回復

  • 漂亮男人

    漂亮男人2017-05-24 11:32:56

    你傳的是混合型數據,把contenttype和processData改成false試試

    $.ajax({
                type:"post",
                url:uploadUrl,
                data:{ "yourfiles": files} //这里改成obj对象,
                dataType: 'json',
                contentType: false,
                processData:false,
                success: function(data) {
                    console.log(data);
                },
                error: function(data){
                            
                }
            });
    

    回覆
    0
  • 迷茫

    迷茫2017-05-24 11:32:56

    processData 要設為 false

    你使用Ajax 提交 需要 需要 使用 formData 來配合

    var file = document.getElementById('changeFile').files[0]
    var uploadUrl = "./php/data.php?action=upload_file"
    var fd = new FormData()
    
    fd.append('myFiles', file)
    
    $.ajax({
        type:"post",
        url:uploadUrl,
        data: fd,
        processData: false,
        contentType: false,
        success: function(data) {
            console.log(data);
        },
        error: function(data){
            
        }
    })

    回覆
    0
  • 取消回覆