Dropzone.js를 다른 필드와 함께 기존 HTML 형식으로 통합
저는 현재 사용자가 게시하고자 하는 광고의 세부사항을 기입하는 HTML 양식을 가지고 있습니다.판매용 아이템의 이미지를 업로드하기 위한 드롭존을 추가할 수 있게 되었습니다.
Dropzone.js를 찾았습니다.그것은 내가 필요로 하는 대부분의 것을 하고 있는 것 같습니다.그러나 문서를 볼 때 전체 양식의 클래스를 다음과 같이 지정해야 합니다.dropzone(입력 요소뿐만 아니라).그러면 내 폼 전체가 드롭존이 되는 거야
드롭존을 폼 전체가 아닌 클래스 "dropzone"으로만 지정하는 등 폼의 일부만으로 사용할 수 있습니까?
별도의 양식을 사용할 수도 있지만, 사용자가 버튼 하나로 모든 것을 제출할 수 있도록 하고 싶습니다.
아니면 다른 라이브러리가 이 기능을 제공합니까?
대단히 고맙습니다
또 다른 : a a adiv드롭존을 프로그래밍 방식으로 구현합니다.
HTML:
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message"></div>
</div>
JQuery:
$(document).ready(function () {
Dropzone.autoDiscover = false;
$("#dZUpload").dropzone({
url: "hn_SimpeFileUploader.ashx",
addRemoveLinks: true,
success: function (file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
}
});
});
메모: autoDiscover를 비활성화하면 Dropzone이 두 번 연결을 시도합니다.
저도 똑같은 문제를 겪었는데, Varan Sinayee의 답변만이 실제로 원래의 문제를 풀 수 있다는 것을 알게 되었습니다.그 대답은 단순화할 수 있습니다.그러면 여기 더 간단한 버전이 있습니다.
순서는 다음과 같습니다.
일반 양식을 만듭니다(더 이상 드롭존에서 처리되지 않으므로 메서드와 enctype arg를 잊지 마십시오).
「Div」와 「를합니다.
class="dropzone"은 이렇게 되어 있습니다) 및 (Dropzone)id="yourDropzoneName"（ 션 ( ( ( ( ( ）Dropzone 옵션 설정 폼과 파일이 게시되는 URL을 설정하려면 autoProcess를 비활성화합니다.큐잉(사용자가 '제출'을 누를 때만 발생)하여 여러 업로드를 허용합니다(필요한 경우).
[ Submit ]버튼을 클릭했을 때의 디폴트 동작이 아닌 [Dropzone]를 사용하도록 init 기능을 설정합니다.
init 함수인 채로, 「sending multiple」이벤트 핸들러를 사용하고, 파일을 사용해 폼 데이터를 송신합니다.
Voila! 이제 $_POST 및 $_FILES 형식으로 데이터를 가져올 수 있습니다(이 예에서는 upload.php에서 발생합니다).
HTML
<form action="upload.php" enctype="multipart/form-data" method="POST">
<input type="text" id ="firstname" name ="firstname" />
<input type="text" id ="lastname" name ="lastname" />
<div class="dropzone" id="myDropzone"></div>
<button type="submit" id="submit-all"> upload </button>
</form>
JS
Dropzone.options.myDropzone= {
url: 'upload.php',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit-all").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});
//send all the form data along with the files:
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("firstname", jQuery("#firstname").val());
formData.append("lastname", jQuery("#lastname").val());
});
}
}
"dropzone.js"는 이미지를 업로드하기 위한 가장 일반적인 라이브러리입니다.폼의 일부로서 「dropzone.js」를 사용하는 경우는, 다음의 순서를 실행할 필요가 있습니다.
1) 클라이언트 측:
HTML:
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</form>
<div>
<button type="submit" id="submit-all"> upload </button>
</div>
JQuery:
<script>
Dropzone.options.myDropzone = {
url: "/Account/Create",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
acceptedFiles: "image/*",
init: function () {
var submitButton = document.querySelector("#submit-all");
var wrapperThis = this;
submitButton.addEventListener("click", function () {
wrapperThis.processQueue();
});
this.on("addedfile", function (file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");
// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
wrapperThis.removeFile(file);
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
this.on('sendingmultiple', function (data, xhr, formData) {
formData.append("Username", $("#Username").val());
});
}
};
</script>
2) 서버 측:
ASP.Net MVC
[HttpPost]
public ActionResult Create()
{
var postedUsername = Request.Form["Username"].ToString();
foreach (var imageFile in Request.Files)
{
}
return Json(new { status = true, Message = "Account created." });
}
더 자동화된 솔루션이 있습니다.
HTML:
<form role="form" enctype="multipart/form-data" action="{{ $url }}" method="{{ $method }}">
{{ csrf_field() }}
<!-- You can add extra form fields here -->
<input hidden id="file" name="file"/>
<!-- You can add extra form fields here -->
<div class="dropzone dropzone-file-area" id="fileUpload">
<div class="dz-default dz-message">
<h3 class="sbold">Drop files here to upload</h3>
<span>You can also click to open file browser</span>
</div>
</div>
<!-- You can add extra form fields here -->
<button type="submit">Submit</button>
</form>
JavaScript:
Dropzone.options.fileUpload = {
url: 'blackHole.php',
addRemoveLinks: true,
accept: function(file) {
let fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function() {
let content = fileReader.result;
$('#file').val(content);
file.previewElement.classList.add("dz-success");
}
file.previewElement.classList.add("dz-complete");
}
}
라라벨:
// Get file content
$file = base64_decode(request('file'));
Drop Zone Discovery를 비활성화할 필요가 없으며 일반 폼 제출은 표준 폼의 시리얼화를 통해 다른 폼 필드와 함께 파일을 전송할 수 있습니다.
이 메커니즘은 파일 내용을 처리할 때 숨김 입력 필드에 base64 문자열로 저장합니다. PHP를 수 .base64_decode()★★★★★★ 。
이 방법이 큰 파일에서는 문제가 생길지 모르겠지만 40MB까지는 가능합니다.
엔요의 튜토리얼은 훌륭합니다.
튜토리얼의 샘플 스크립트는 드롭존에 내장된 버튼(즉 폼 요소)에 대해 올바르게 동작하는 것을 알았습니다.폼 엘리먼트 외부에 버튼을 두고 싶다면 클릭 이벤트를 사용하여 이 작업을 수행할 수 있습니다.
첫 번째 HTML:
<form id="my-awesome-dropzone" action="/upload" class="dropzone">
<div class="dropzone-previews"></div>
<div class="fallback"> <!-- this is the fallback if JS isn't working -->
<input name="file" type="file" multiple />
</div>
</form>
<button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button>
그러면 스크립트 태그...
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 25,
maxFiles: 25,
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// Here's the change from enyo's tutorial...
$("#submit-all").click(function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
}
}
sqram이 말한 것 외에 Dropzone에는 문서화되어 있지 않은 옵션인 "Hidden Input Container"가 있습니다.숨김 파일 필드를 추가할 양식 선택 도구에 이 옵션을 설정하기만 하면 됩니다.그리고 부아!일반적으로 Dropzone이 본문에 추가하는 ".dz-hidden-input" 파일 필드가 마법처럼 폼으로 이동합니다.드롭존 소스 코드를 변경할 수 없습니다.
이렇게 하면 Dropzone 파일필드가 폼으로 이동하는데 필드 이름은 없습니다.따라서 다음 사항을 추가해야 합니다.
_this.hiddenFileInput.setAttribute("name", "field_name[]");
다음 행 뒤에 있는 dropzone.dropzone:
_this.hiddenFileInput = document.createElement("input");
547호선 주변.
저도 같은 문제에 직면한 적이 있기 때문에 여기에 답변을 드리고 싶습니다.$_FILES 요소는 다른 폼과 같은 투고의 일부로 사용할 수 있기를 바랍니다.제 답변은 @mrtnmgs에 근거하고 있습니다만, 그 질문에 추가된 코멘트에 주목하고 있습니다.
첫 번째: Dropzone은 Ajax를 통해 데이터를 게시합니다.
formData.append옵션은 여전히 UX 액션에 대처해야 한다는 것을 의미합니다.즉, 이 모든 것은 백그라운드에서 이루어지며 일반적인 폼 포스트가 아닙니다.의 이데가 your your your your your your data에 게시됩니다.url파라미터를 지정합니다.
두 번째:따라서 폼 포스트를 모방하려면 게시된 데이터를 저장해야 합니다.
를 위해서는 합니다.$_POST또는$_FILES사용자는 투고된 데이터가 수신된 페이지로 이동하지 않기 때문에 다른 페이지에서 사용할 수 있는 세션에서 로딩됩니다.
세 번째:이 데이터가 작업되는 페이지로 사용자를 리디렉션해야 합니다.
이제 데이터를 게시하고 세션에 저장하면 추가 페이지에 해당 데이터를 표시/처리해야 합니다.그 페이지에도 유저를 송신할 필요가 있습니다.
예를 들어 다음과 같습니다.
[드롭존 코드:Jquery 사용]
$('#dropArea').dropzone({
url: base_url+'admin/saveProject',
maxFiles: 1,
uploadMultiple: false,
autoProcessQueue:false,
addRemoveLinks: true,
init: function(){
dzClosure = this;
$('#projectActionBtn').on('click',function(e) {
dzClosure.processQueue(); /* My button isn't a submit */
});
// My project only has 1 file hence not sendingmultiple
dzClosure.on('sending', function(data, xhr, formData) {
$('#add_user input[type="text"],#add_user textarea').each(function(){
formData.append($(this).attr('name'),$(this).val());
})
});
dzClosure.on('complete',function(){
window.location.href = base_url+'admin/saveProject';
})
},
});
드롭존에서 '송신' 이벤트를 캡처하여 폼데이터를 변경할 수 있습니다.
dropZone.on('sending', function(data, xhr, formData){
formData.append('fieldname', 'value');
});
모든 파일을 다른 폼 데이터와 함께 한 번의 요청으로 전송하기 위해 Dropzone.js 임시 숨김을 복사할 수 있습니다.input노드를 폼에 추가합니다.이 작업은 다음 기간 내에 수행할 수 있습니다.addedfiles이벤트 핸들러:
var myDropzone = new Dropzone("myDivSelector", { url: "#", autoProcessQueue: false });
myDropzone.on("addedfiles", () => {
// Input node with selected files. It will be removed from document shortly in order to
// give user ability to choose another set of files.
var usedInput = myDropzone.hiddenFileInput;
// Append it to form after stack become empty, because if you append it earlier
// it will be removed from its parent node by Dropzone.js.
setTimeout(() => {
// myForm - is form node that you want to submit.
myForm.appendChild(usedInput);
// Set some unique name in order to submit data.
usedInput.name = "foo";
}, 0);
});
일반적으로 이는 구현 세부사항에 따라 달라지는 회피책입니다.관련 소스 코드
5.7.0 버전의 드롭존 소스 코드를 모두 레드하여 우아한 솔루션을 찾았습니다.
솔루션
<form id="upload" enctype="multipart/form-data">
<input type="text" name="name" value="somename">
<input type="checkbox" name="terms_agreed">
<div id="previewsContainer" class="dropzone">
<div class="dz-default dz-message">
<button class="dz-button" type="button">
Drop files here to upload
</button>
</div>
</div>
<input id="dz-submit" type="submit" value="submit">
</form>
Dropzone.autoDiscover = false;
new Dropzone("#upload",{
clickable: ".dropzone",
url: "upload.php",
previewsContainer: "#previewsContainer",
uploadMultiple: true,
autoProcessQueue: false,
init() {
var myDropzone = this;
this.element.querySelector("[type=submit]").addEventListener("click", function(e){
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
}
});
이것은 Django+Dropzone을 기반으로 한 샘플입니다.뷰가 선택(필수)되어 송신되었습니다.
<form action="/share/upload/" class="dropzone" id="uploadDropzone">
{% csrf_token %}
<select id="warehouse" required>
<option value="">Select a warehouse</option>
{% for warehouse in warehouses %}
<option value={{forloop.counter0}}>{{warehouse.warehousename}}</option>
{% endfor %}
</select>
<button id="submit-upload btn" type="submit">upload</button>
</form>
<script src="{% static '/js/libs/dropzone/dropzone.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
var filename = "";
Dropzone.options.uploadDropzone = {
paramName: "file", // The name that will be used to transfer the file,
maxFilesize: 250, // MB
autoProcessQueue: false,
accept: function(file, done) {
console.log(file.name);
filename = file.name;
done(); // !Very important
},
init: function() {
var myDropzone = this,
submitButton = document.querySelector("[type=submit]");
submitButton.addEventListener('click', function(e) {
var isValid = document.querySelector('#warehouse').reportValidity();
e.preventDefault();
e.stopPropagation();
if (isValid)
myDropzone.processQueue();
});
this.on('sendingmultiple', function(data, xhr, formData) {
formData.append("warehouse", jQuery("#warehouse option:selected").val());
});
}
};
</script>
이것은 기존 형식으로 Dropzone.js를 사용하는 방법의 또 다른 예입니다.
dropzone.drop:
init: function() {
this.on("success", function(file, responseText) {
//alert("HELLO ?" + responseText);
mylittlefix(responseText);
});
return noop;
},
그리고 나서 나중에 내가 넣은 파일에
function mylittlefix(responseText) {
$('#botofform').append('<input type="hidden" name="files[]" value="'+ responseText +'">');
}
이것은 ID를 가진 div가 있다고 가정합니다.#botofform업로드할 때 업로드된 파일의 이름을 사용할 수 있습니다.
주의: 업로드 스크립트에서 업로드된 파일 이름을 반환했습니다.jpeg dubblenote도 업로드 디렉토리에서 사용되지 않는 파일을 체크하고 삭제하기 위한 청소 스크립트를 만들어야 합니다.프런트 엔드의 인증되지 않은 형식인 경우:)
이거 드셔보세요
<div class="dropzone dz-clickable" id="myDrop">
<div class="dz-default dz-message" data-dz-message="">
<span>Drop files here to upload</span>
</div>
</div>
JS
<script>
Dropzone.autoDiscover = false;
Dropzone.default.autoDiscover=false;
$("div#myDrop").dropzone({
url: "/file/post",
});
</script>
언급URL : https://stackoverflow.com/questions/17872417/integrating-dropzone-js-into-existing-html-form-with-other-fields
'programing' 카테고리의 다른 글
| Composer를 설치하기 위해 PHP의 openssl 확장을 활성화하는 방법은 무엇입니까? (0) | 2022.10.29 |
|---|---|
| JavaScript만으로 파일에 데이터를 쓸 수 있습니까? (0) | 2022.10.29 |
| MySQL에 이미지를 저장할 수 있습니까? (0) | 2022.10.29 |
| 'python'을 입력하면 CMD가 Windows Store를 엽니다. (0) | 2022.10.29 |
| Apache2에서 호스팅하는 Vue 라우터 (0) | 2022.10.29 |