web-dev-qa-db-ja.com

Dropzone.js-フォルダーにアップロードする前にファイル名を変更する方法

私は DropzoneJS スクリプトを使用してドラッグアンドドロップで画像をアップロードしていますが、サーバーフォルダーにアップロードする前に現在のタイムスタンプとファイル名を追加する方法のソリューションを探していますファイルが既にフォルダに存在する場合、同じ画像をアップロードします。

また、下記のstackoverflowリンクを参照しましたが、これをどこで実装するか混乱しています。

  1. https://stackoverflow.com/a/23805488/3113858
  2. https://stackoverflow.com/a/19432731/3113858

参照用 dropzone.jsスクリプト

jqueryimage-uploadingdropzone.js
17
Mr.Happy

PHPを使用して実装した次のコードを確認してください。

インデックスファイルで次のコードを使用します

$(document).ready(function() {
            Dropzone.autoDiscover = false;
            var fileList = new Array;
            var i =0;
            $("#some-dropzone").dropzone({
                addRemoveLinks: true,
                init: function() {

                    // Hack: Add the dropzone class to the element
                    $(this.element).addClass("dropzone");

                    this.on("success", function(file, serverFileName) {
                        fileList[i] = {"serverFileName" : serverFileName, "fileName" : file.name,"fileId" : i };
                        //console.log(fileList);
                        i++;

                    });
                    this.on("removedfile", function(file) {
                        var rmvFile = "";
                        for(f=0;f<fileList.length;f++){

                            if(fileList[f].fileName == file.name)
                            {
                                rmvFile = fileList[f].serverFileName;

                            }

                        }

                        if (rmvFile){
                            $.ajax({
                                url: "http://localhost/dropzone/sample/delete_temp_files.php",
                                type: "POST",
                                data: { "fileList" : rmvFile }
                            });
                        }
                    });

                },
                url: "http://localhost/dropzone/sample/upload.php"
            });

        });

Upload.php

<?php
$ds = DIRECTORY_SEPARATOR;  // Store directory separator (DIRECTORY_SEPARATOR) to a simple variable. This is just a personal preference as we hate to type long variable name.
$storeFolder = 'uploads';   // Declare a variable for destination folder.
if (!empty($_FILES)) {

    $tempFile = $_FILES['file']['tmp_name'];          // If file is sent to the page, store the file object to a temporary variable.
    $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  // Create the absolute path of the destination folder.
    // Adding timestamp with image's name so that files with same name can be uploaded easily.
    $date = new DateTime();
    $newFileName = $date->getTimestamp().$_FILES['file']['name'];
    $targetFile =  $targetPath.$newFileName;  // Create the absolute path of the uploaded file destination.
    move_uploaded_file($tempFile,$targetFile); // Move uploaded file to destination.

    echo $newFileName;
}
?>

delete_temp_files.php

<?php
$ds = DIRECTORY_SEPARATOR;  // Store directory separator (DIRECTORY_SEPARATOR) to a simple variable. This is just a personal preference as we hate to type long variable name.
$storeFolder = 'uploads'; 

$fileList = $_POST['fileList'];
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;


if(isset($fileList)){
    unlink($targetPath.$fileList);
}

?>

これがajaxを使用して画像をアップロードし、ajaxを使用して削除するのに役立つことを願っています:)

私は次の参照から見つけました：

Dropzone.js-サーバーからファイルを削除する方法？PHPでDropzone.js削除ボタン

また、ユーザーが同じ名前の重複ファイルをアップロードできないように、＃1110行の後にdropzone.jsファイルに次のコードを追加します。

Dropzone.prototype.addFile = function(file) {
    if (this.files.length) {
        var _i, _len;
        for (_i = 0, _len = this.files.length; _i < _len; _i++) {
            if(this.files[_i].name === file.name && this.files[_i].size === file.size) {
                return false;
        }
    }
}

参照リンク： https://www.bountysource.com/issues/2993843-dropzone-did-not-check-the-duplicate-file-on-addfile?utm_campaign=plugin&utm_content=tracker%2F283989&utm_medium=issues&utm_source=github

23
Rajnikanth

アップロードする前に毎回ファイル名の前にタイムスタンプを付けるには、DropzoneJSのバージョンに応じて2つのオプションがあります。

DropzoneJS 5.1 +の新しいバージョンには、次のように使用されるrenameFile関数があります。

    ...
    renameFile: function (file) {
        file.name = new Date().getTime() + '_' + file.name;
    }
    ...

古いバージョン v4.3-v5.1では、これは少し異なります。

このバージョンにはrenameFilenameオプションがあり、これは次のように使用されます。

Dropzone.autoDiscover = false;
$(document).ready(function () {
    $(".dropzone").dropzone({
        renameFilename: function (filename) {
            return new Date().getTime() + '_' + filename;
        }
    });
});

ハッピーコーディング、Kalasch

20
Kalaschni

標準のphpファイルの名前変更を使用しました。

$targetFile =  $targetPath . $_FILES['file']['name']; //the original upload
$newfilename = "somename" . $variable . ".jpg"; //a new filename string

rename($targetFile , $new); //rename at the end of the function

これは私にとってはうまく機能し、実装は非常に簡単でした。 .jpg拡張子はおそらくハードコードには推奨されませんが、私のシナリオではjpgファイルタイプのみを取得します。

0
sixstring