文件上传Javascript

时间:2016-01-08 10:11:42

标签: javascript php ajax file-upload jquery-file-upload

我一直在滚动堆栈,无法找到与我的问题相关的任何答案。

问题如下:

当我发布图像时,名称为NULL,因此它不会发布图像名称:/它不会将图像上传到。

我的ajax帖子:

$.ajax({
      url: 'handler.php', 
      type: 'POST',
      data: new FormData($(where.parentNode)[0]),
      processData: false                   
        }).done(function(result){
            console.log("Success: Files sent!", result);
        }).fail(function(){
            console.log("An error occurred, the files couldn't be sent!");
        });

创建表单并进行处理。

var elem = document.querySelectorAll('p,h1,h2,h3,h4,h5,h6,span,b,bold,i,li,strong,em,small,sub,sup,ins,del,mark,img');

for (var i = elem.length - 1; i >= 0; i--) {
    if (elem[i].className == "no-edit") {
    } else {
        if ($(elem[i]).attr("ID") != "livekit") {
            if(elem[i].nodeName == "IMG"){
                $(elem[i]).css("max-width", elem[i].width);
                $(elem[i]).css("max-height", elem[i].height);
                console.log("W: " + elem[i].width + " H: " + elem[i].height + " | " + elem[i].src);

                var imageControl = document.createElement("form");
                imageControl.className += 'livekit-nosave';
                imageControl.action += 'handler.php';
                imageControl.enctype = "multipart/form-data";
                imageControl.method = "POST";
                imageControl.innerHTML += '<input id="image" name="image" type="file" onchange="previewFile(this)">';

                var imageContain = document.createElement("div");
                imageContain.className += 'livekit-nosave';
                insertAfter(elem[i], imageContain);
                imageContain.appendChild(imageControl);
                imageControl.appendChild(elem[i]);
            }else{
            $(elem[i]).click(function() {
                if(this != previous){
                    if(previous == 'undefined'){
                    }else{
                        previous.style.zIndex = 1;
                        previous.lastChild.remove();
                        previous.lastChild.remove();
                    }
                    this.innerHTML += "<img class='edit-img livekit-nosave' src='http://www.starlinedesign.nl/livekit_remake/includes/img/edit.png' contenteditable='false' alt='Edit text'>";
                    this.innerHTML += "<div class='edit-bar livekit-nosave' contenteditable='false'><a class='save' onclick='save(this.parentNode);'>Opslaan</a></div>";
                    $(this).addClass("editable");
                    this.contentEditable = true;
                    this.style.zIndex = 99998;
                    previous = this;
                }
            });

        }
        }
    }
}

handler.php

if(ini_get('file_uploads') == 1){
  $response_array["status"] = "HTTP Upload Enabled";
  if(isset($_FILES["file"]["type"])){
    $response_array["status"] = "File received";
  }elseif(!empty($_POST)){
    var_dump($_POST['file']);
    $response_array['status'] = 'Success';
    // verwerken van de post
    //$_FILE['name']['image'];
    if(file_exists('livekit_uploads/' . $_FILES['image']['name'])){
            die('File with that name already exists.');
        }else{
        $errors= array();
        $file_name = $_FILES['image']['name'];
        $file_size =$_FILES['image']['size'];
        $file_tmp =$_FILES['image']['tmp_name'];
        $file_type=$_FILES['image']['type'];   
        $file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));

        $expensions= array("jpeg","jpg","png");         
        if(in_array($file_ext,$expensions)=== false){
            $errors[]="extension not allowed, please choose a JPEG or PNG file.";
        }
        if($file_size > 2097152){
        $errors[]='Bestand mag niet groter zijn dan 2mb! Verklein met photoshop d.m.v save as web image en dan de kwaliteit naar 75 te doen.';
        }               
        if(empty($errors)==true){
            move_uploaded_file($file_tmp,"images/".$file_name);
            echo "Success";

//          $query = $conn -> prepare("
//              INSERT INTO includeimage (`image_url`, `order_id`) VALUES ('$file_name', '$orderid');
//          ");
//          $query -> execute();
        }else{
            print_r($errors);
        }
    }
  }
}else {
  $response_array["status"] = "Niks ontvangen";
}

我的问题是:为什么表单没有提交任何表单数据?我需要文件名,所以我可以将其发布到数据库,我还需要文件名将其上传到uploads文件夹。

控制台说:

  

edit.js:221成功:发送的文件!已经具有该名称的NULL文件   存在。

1 个答案:

答案 0 :(得分:0)

您执行var_dump($_POST['file']);但没有名称=“file”的字段。我只看到一个名为“image”的输入字段。 正如PHP文档所述(http://php.net/manual/en/features.file-upload.post-method.php),您有一个包含$ _FILES信息的数组。请看以下部分:

  

$ _ FILES ['userfile'] ['name']

     

客户端计算机上文件的原始名称。

因此,要获取名称,您应该使用$_FILES['image']['name']