html要素を呼び出してJavaScriptで操作します。

私はWeb開発を初めて使い、ファイルアップロードゾーンのグリッドを実装しようとしています。html要素を呼び出してJavaScriptで操作します。

私は現在建設中のサイトにDropZone.jsを使用しています。私はDropZoneをフォーマットし、HTMLに追加のDropZonesを作成しました。私は4つの行を持っていて、グリッドを作成しています。これらのそれぞれは、JavaScript内で同じ親を呼び出しています。

を私はこれを変更したい

を「アップロードするファイルをここにドロップ」：これらのゾーンのそれぞれの内部で言うデフォルトのメッセージです。実際には、各インスタンスに別々の説明が必要です。このグリッド内の各ゾーンには、固有の記述があります。

私が知りたいのは、どうすればこのことをやり遂げるのでしょうか？

私はサイトのhtml、dropzone.jsの.jsと.cssを含めました。

JavaScriptでhtmlの要素を呼び出すことができますか？呼び出されている要素に関連する新しいテキストを作成するためにjavacriptからdictDefaultMessage: "Drop files here to upload",を操作しますか？

dropzonesはすべて同じ親を呼び出していますが、私は16の異なるdropzone.jsを作ってこの作業をしたくありません。

私はウェブ開発には新しく、深い説明をいただければ幸いです。

ありがとうございます。

Dropzone.prototype.defaultOptions = { 
 
     url: null, 
 
     method: "post", 
 
     withCredentials: false, 
 
     parallelUploads: 2, 
 
     uploadMultiple: false, 
 
     maxFilesize: 256, 
 
     paramName: "file", 
 
     createImageThumbnails: true, 
 
     maxThumbnailFilesize: 10, 
 
     thumbnailWidth: 120, 
 
     thumbnailHeight: 120, 
 
     filesizeBase: 1000, 
 
     maxFiles: null, 
 
     params: {}, 
 
     clickable: true, 
 
     ignoreHiddenFiles: true, 
 
     acceptedFiles: null, 
 
     acceptedMimeTypes: null, 
 
     autoProcessQueue: true, 
 
     autoQueue: true, 
 
     addRemoveLinks: false, 
 
     previewsContainer: null, 
 
     hiddenInputContainer: "body", 
 
     capture: null, 
 
     renameFilename: null, 
 
     dictDefaultMessage: "Drop files here to upload", 
 
     dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.", 
 
     dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.", 
 
     dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.", 
 
     dictInvalidFileType: "You can't upload files of this type.", 
 
     dictResponseError: "Server responded with {{statusCode}} code.", 
 
     dictCancelUpload: "Cancel upload", 
 
     dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?", 
 
     dictRemoveFile: "Remove file", 
 
     dictRemoveFileConfirmation: null, 
 
     dictMaxFilesExceeded: "You can not upload any more files.", 
 
     accept: function(file, done) { 
 
     return done(); 
 
     },

<title>Zone #16</title> 
 

 
    <script src="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.js"></script> 
 
    <link rel="stylesheet" href="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.css"> 
 
    <p style="color:rgb(4,0,84)" align="center"> Drop your file in the appropriate zone. There are 16 zones to choose from </p> 
 
    <!-- Change /upload-target to your upload address --> 
 
    <form action="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI" class="dropzone"></form> 
 

 

 
    <title>Zone #</title> 
 

 
    <script src="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.js"></script> 
 
    <link rel="stylesheet" href="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.css"> 
 
    <!-- Change /upload-target to your upload address --> 
 
    <form action="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI" class="dropzone"></form>

出典

2016-07-27 Yah_DANIMAL

[ドキュメント]（http://www.dropzonejs.com/#tips）と言い、「あなたは、デフォルトのメッセージをまったくしたくない場合。 ..あなたは 'dz-message'クラスであなたのdropzone要素の中に要素を入れることができ、dropzoneはあなたのためのメッセージを作成しません。これはゾーンごとにカスタムメッセージを指定するのに役立ちます。 – showdev

まず第一に、あなただけのヘッダーに一度スクリプトやスタイルシートを含める必要があります。スクリプトをヘッダに入れたら、それはwith asyncです。フォームのそれぞれについて、今

HTML

<head> 
<!-- Stylesheet goes here --> 
<!-- Script goes here --> 
</head>

、お使いのブラウザではJavaScriptがIDが箱れ得るべきであるかを知るようになる彼らにユニークID.Thisを与える必要があります。

HTML

<form action="" class="dropzone" id="zone16"></form>

最後に、各ゾーンに一意の名前を与えるために、あなただけのdictDefaultMessageを変更する必要があります。

あなたはそうのように、この操作を行います。

はJavaScript

Dropzone.options.zone16 { 
    dictDefaultMessage: "This is the sixteenth zone!" 
}

出典

2016-07-27 21:08:24

これはまったく機能しませんでした。 –

defaultValuesは、より多くのバックデフォルト値を設定するための構成のバックアップのように見えます。

あなたは

まず、あなたのオブジェクトを取得する必要がJavaScriptでHTML（DOM）オブジェクトを操作することができます。

次はDOM-オブジェクトにアクセスし、それを操作することができます。

var obj = document.getElementById("divExample"); 
 

 
obj.style.backgroundColor = "green"; //Do a CSS action 
 

 
obj.classList.toggle("Crap", false); //Disable CSS-Class Crap 
 

 
obj.innerHTML = "New Content"; //Labeling it

基本チュートリアル：http://callmenick.com/post/basics-javascript-dom-manipulation

出典

2016-07-27 21:08:56 COOLGAMETUBE

html要素を呼び出してJavaScriptで操作します。

答えて

関連する問題