현재 사용자가 게시하려는 광고의 세부 정보를 채우는 HTML 양식이 있습니다. 이제 판매 할 상품의 이미지를 업로드하기위한 드롭 존 을 추가하고 싶습니다 .
필요한 대부분의 작업을 수행하는 Dropzone.js 를 찾았 습니다 . 그러나 설명서를 볼 dropzone
때 입력 요소 와 달리 전체 양식의 클래스를 지정해야합니다 . 이것은 내 전체 양식이 dropzone 이됨을 의미합니다 .
내 양식의 일부로 만 dropzone을 사용할 수 있습니까? 예 를 들어 요소를 전체 양식이 아닌 “dropzone” 클래스 로만 지정하면 됩니까?
별도의 양식을 사용할 수 있지만 사용자가 하나의 버튼으로 모든 양식을 제출할 수 있기를 바랍니다.
또는 이것을 할 수있는 다른 라이브러리가 있습니까?
많은 감사
답변
또 다른 방법 div
은 클래스 이름 dropzone을 사용하여 양식에 a를 추가하고 프로그래밍 방식으로 dropzone을 구현하는 것입니다.
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에서 두 번 연결을 시도합니다.
블로그 기사 : Dropzone js + Asp.net : 대량 이미지를 업로드하는 쉬운 방법
답변
나는 똑같은 문제를 겪었고 Varan Sinayee의 대답이 실제로 원래의 질문을 해결 한 유일한 방법이라는 것을 알았습니다. 그 대답은 단순화 될 수 있으므로 여기 더 간단한 버전이 있습니다.
단계는 다음과 같습니다.
-
일반적인 형식을 만듭니다 (더 이상 dropzone에서 처리하지 않기 때문에 메소드와 enctype 인수를 잊지 마십시오).
-
class="dropzone"
(Dropzone이 연결되는 방식) 및id="yourDropzoneName"
(옵션 변경에 사용 ) 으로 div를 넣습니다 . -
양식 및 파일이 게시 될 URL을 설정하려면 Dropzone의 옵션을 설정하고 autoProcessQueue를 비활성화하고 (사용자가 ‘submit’을 누를 때만 발생) 여러 업로드를 허용합니다 (필요한 경우).
-
제출 단추를 클릭 할 때 기본 동작 대신 Dropzone을 사용하도록 init 기능을 설정하십시오.
-
여전히 init 함수에서 “sendingmultiple”이벤트 핸들러를 사용하여 파일과 함께 양식 데이터를 보내십시오.
oil! 이제 $ _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." });
}
답변
Enyo의 튜토리얼 은 훌륭합니다.
튜토리얼의 샘플 스크립트가 dropzone에 포함 된 버튼 (예 : 양식 요소)에 잘 작동한다는 것을 알았습니다. 양식 요소 외부에 버튼을 넣으려면 click 이벤트를 사용하여 버튼을 수행 할 수있었습니다.
먼저 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에는 “hiddenInputContainer”라는 추가 문서화되지 않은 옵션이 있습니다. 숨겨진 파일 필드를 추가 할 양식의 선택기로이 옵션을 설정하기 만하면됩니다. 그리고 짜잔! Dropzone이 일반적으로 본문에 추가하는 “.dz-hidden-input”파일 필드는 마술처럼 양식으로 이동합니다. Dropzone 소스 코드를 변경하지 않습니다.
이제 Dropzone 파일 필드를 양식으로 이동하는 동안 필드 이름이 없습니다. 따라서 다음을 추가해야합니다.
_this.hiddenFileInput.setAttribute("name", "field_name[]");
이 줄 다음에 dropzone.js를 삭제하십시오.
_this.hiddenFileInput = document.createElement("input");
547 행.
답변
이에 대한 자동화 된 솔루션이 있습니다.
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>
자바 스크립트 :
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'));
DropZone Discovery를 비활성화 할 필요가 없으며 일반 양식 제출은 표준 양식 직렬화를 통해 다른 양식 필드와 함께 파일을 보낼 수 있습니다.
이 메커니즘은 파일 내용이 처리 될 때 숨겨진 입력 필드에 base64 문자열로 저장합니다. 표준 base64_decode()
방법을 통해 PHP에서 이진 문자열로 다시 디코딩 할 수 있습니다 .
이 방법이 큰 파일로 손상 될지 모르겠지만 ~ 40MB 파일로 작동합니다.
답변
dropzone에서 ‘sending’이벤트를 포착하여 formData를 수정할 수 있습니다.
dropZone.on('sending', function(data, xhr, formData){
formData.append('fieldname', 'value');
});