Question

嗨，我在弄清楚我的ajax请求有什么问题时遇到了一些麻烦。它是一个上传图片的脚本。

php文件设置一个页面，其中包含用于选择图像和显示其预览的内联弹出窗口

选择是以#uploads的形式完成的，如果表单已提交，它的工作方式应该如此，刷新到包含$ _FILES信息的页面

php文件：

<?php
echo (print_r($_FILES));
$html = '
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/style/style.css">
    <title>test</title>
</head>
<body>
    <div id="overlay"></div>
    <div id="bilder"></div>
    <div id="nybild">
        <div id="ny_header">
        <form id="upload" method="post" enctype="multipart/form-data">
            <input type="file" id="filer" name="filer" multiple>
            <input type="submit">
        </form>
        <div id="preview"></div>
        </div>
        <div>
            <button id="add">Lägg till</button>
            <button id="cancel">Avbryt</button> 
        </div>
    </div>
    <button id="lagg_till">Lägg till nu bild</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/js/page.js"></script>
</body>
</html>
';
echo $html;

java脚本文件包含显示选择弹出窗口，创建文件预览并最终使用ajax上传它们的逻辑。然而，最后一部分不起作用。返回的页面显示一个空的$ _FILES数组

page.js：

$(function(){
    $nybild =   $("#nybild");
    $overlay = $("#overlay");
    $overlay2 = $("#overlay2");
    $preview = $("#preview");

$("#lagg_till").click(function(){
    $overlay.show();
    $nybild.show();
});

$("#filer").on("change", function(){
    $preview.html("");
    var files = this.files;
    for(var i = 0; i < files.length; i++){
        if(files[i].type.match("image.*")){
            var reader = new FileReader();
            reader.onload = (function(theFile){
                return function(e){
                    $preview.append(["<img src='", e.target.result, "' class='thumb' title='", escape(theFile.name), "'/>"].join(''));
                };
            })(files[i]);
            reader.readAsDataURL(files[i]);
        }
    }
});

$("#cancel").click(close_nybild);

$("#add").click(function(){
    var formdata = new FormData($("#upload").get());
    $.ajax({
        type: 'POST',
        dataType: 'text',
        beforeSend: function(){
            console.log(formdata);
        },
        success: function(data){
            var pop = window.open("", "MsgWindow", "width=200, height=100");
            pop.document.write(data);
        },
        error:  function(){
            $overlay2.hide();
            alert("Upload Misslyckades B(");
        },
        // Form data
        data: formdata,
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    })
});


function close_nybild(){
    $overlay.hide();
    $nybild.hide();
    reset($nybild);
}

var reset = function(e){
    e.wrap("<form>").closest('form').get(0).reset();
    e.unwrap();
    $preview.html("");

}
});

大部分代码都是从这里无耻地复制的： How can I upload files asynchronously?

Ajax上传不起作用

0 个答案: