Dropzone JS无法上传文件答案

【问题标题】：Dropzone JS not able to upload fileDropzone JS无法上传文件
【发布时间】：2016-11-14 10:15:46
【问题描述】：

我正在使用 Dropzone JS，并从我的前端 (localhost:9000) 调用 upload.php，在其中获取图像，然后将其上传到后端 (localhost:80) 的文件夹中。 这是我的 html：

 <form action="localhost:80/ProgettoTimelinegit/api/upload.php" class="dropzone" id="my-dropzone" enctype="multipart/form-data">

 </form>

我的 javascript ：

Dropzone.autoDiscover = false;
$("#my-dropzone").options = { 
    maxFilesize: 4, // MB
    url:"http://localhost:80/ProgettoTimelinegit/api/upload.php",
    addRemoveLinks : true,
    uploadMultiple:true,
    paramName:"file",
    parallelUploads: 2,
    maxFiles: 10,
    autoProcessQueue: true,
    headers: {
        // remove Cache-Control and X-Requested-With
        // to be sent along with the request
        'Cache-Control': null,
        'X-Requested-With': null
    }
};

并上传.php

$ds = DIRECTORY_SEPARATOR;  //1
$storeFolder = '/xampp/htdocs/images/';   //2

if(!empty($_FILES)) {
    // START // CREATE DESTINATION FOLDER
    define('DESTINATION_FOLDER','../api/upload/');

    if (!@file_exists(DESTINATION_FOLDER)) {
        if (!mkdir(DESTINATION_FOLDER, 0777, true)) {
            $errors[] = "Destination folder does not exist or no permissions to see it.";
        }

        // END // CREATE DESTINATION FOLDER
        $temp = $_FILES['file[]']['tmp_name'];
        $dir_seperator = "fold/";

        //$destination_path = dirname(__FILE__).$dir_seperator.$folder.$dir_seperator;
        $destination_path = DESTINATION_FOLDER.$dir_seperator;
        $target_path = $destination_path.(rand(10000, 99999)."_".$_FILES['file']['name']); 
        move_uploaded_file($temp, $target_path);
    }
}

如果我在控制台中上传图片（适用于每个浏览器）它

POST localhost:80/ProgettoTimelinegit/api/upload.php net::ERR_UNKNOWN_URL_SCHEME

我要做的是在 localhost:80/progettoTimelinegit/api/upload/ 中加载图片

【问题讨论】：

我用过startutorial.com/articles/view/…的教程

标签： javascript php image-uploading dropzone.js

【解决方案1】：

您的upload.php-文件已经在api-文件夹中，只需更改此行：

define('DESTINATION_FOLDER','../api/upload/');

到：

define('DESTINATION_FOLDER','upload/');

它应该可以工作。你有很多奇怪的变量，未使用的变量等，所以可能还有其他错误。

【讨论】：

【解决方案2】：

我设法让它工作了，花了我 4 天的时间，但现在它可以工作了：您必须在代码的某些部分小心：

HTML

Do not add enctype="multipart/form-data" or if you do remember to add rewrite rule

“multipart/form-data”使 dropzone 自动设置选项请求

虚拟主机或带有 Xampp/wampp/vagrant 的 .ini / .htAccess

VirtualHost *:80>
    DocumentRoot "#folderOfyourWebsite"
    ServerName yoursite.name
     <Directory "#path To The HTML of Your Index Page">
         Options Indexes FollowSymLinks MultiViews ExecCGI
         AllowOverride Authconfig FileInfo
         Require all granted
        </Directory>
        Header set Access-Control-Allow-Origin "*"      
        Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
        Header set Access-Control-Max-Age "1000"
        Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
        RewriteEngine On
        RewriteCond %{REQUEST_METHOD} OPTIONS
        RewriteRule ^(.*)$ $1 [R=200,L]
  </VirtualHost>

在重写引擎中我们告诉他：好的，如果你收到一个选项请求，用 200 重写它（成功的帖子）

所以你的 TO-DO 清单可以这样概括：

检查你的 html dropzone 表单，如果你有 enctype 你必须写 vhost 或 htaccess 中的重写规则
您是否编写了重写规则以使 cors 成功？
确保您的路径具有所有权限并且您的上传文件夹存在
无论您在哪里执行 http 请求，都要检查您的静态路径

【讨论】：