Dropzone.js 가 업로드 한 예제 코드 를 사용 합 니 다.
17249 단어 Dropzone.js업로드
설명:배경 에 사용 되 는 python 의 flask 프레임 워 크 는 배경 이 이 글 을 이해 하 는 데 아무런 영향 을 주지 않 습 니 다.phop 을 사용 할 수 있 습 니 다.
업로드 영역
Dropzone.js 와 dropzone.css 를 도입 한 후 폼 form 으로 class="dropzone"을 정의 하면 완 료 됩 니 다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask upload with Dropzone example</title>
<link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<!-- -->
<form id ="myAwesomeDropzone" action="{{ url_for('upload_file') }}" class="dropzone" method="POST" enctype="multipart/form-data"></form>
<!-- -->
</body>
</html>
업로드 영역
div 는 업로드 구역 으로 도 쉬 워 요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask upload with Dropzone example</title>
<link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<div id="myId" class="dropzone" style="width: 800px; height: 300px;"> </div>
<script type="text/javascript">
// js jquery div ，
//var myDropzone = new Dropzone("#myId", { url: "{{ url_for('upload_file') }}" });
$("#myId").dropzone({ url: "{{ url_for('upload_file') }}" });
</script>
</body>
</html>
form 을 업로드 영역 으로 설정 합 니 다.
설정 도 두 가지 로 나 뉘 는데 사용 하 는 form 폼 이 올 라 오 면 다음 과 같이 설정 합 니 다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask upload with Dropzone example</title>
<link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<form id ="myAwesomeDropzone" action="{{ url_for('upload_file') }}" class="dropzone" method="POST" enctype="multipart/form-data">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<script type="text/javascript">
// ， ， ， form ，myAwesomeDropzone id
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
accept: function(file, done) {
if (file.name != "justinbieber.jpg") {
done("Naha, you don't.");
}else {
done();
}
}
};
</script>
</body>
</html>
div 업로드 영역 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask upload with Dropzone example</title>
<link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<div id="myId" class="dropzone" style="width: 800px; height: 300px;"> </div>
<script type="text/javascript">
// ， div
Dropzone.autoDiscover = false;// ，
$("#myId").dropzone({
url: "{{ url_for('upload_file') }}",
addRemoveLinks: true,
method: 'post',
filesizeBase: 1024
});
</script>
</body>
</html>
메시지
제 1 종
<!DOCTYPE html>
<html>
<head>
<meta charset=="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="external nofollow" >
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="external nofollow" >
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='dropzone.js') }}"></script>
<script>
Dropzone.autoDiscover = false;
</script>
<style>
html, body {
height: 100%;
}
#actions {
margin: 2em 0;
}
/* Mimic table appearance */
div.table {
display: table;
}
div.table .file-row {
display: table-row;
}
div.table .file-row > div {
display: table-cell;
vertical-align: top;
border-top: 1px solid #ddd;
padding: 8px;
}
div.table .file-row:nth-child(odd) {
background: #f9f9f9;
}
/* The total progress gets shown by event listeners */
#total-progress {
opacity: 0;
transition: opacity 0.3s linear;
}
/* Hide the progress bar when finished */
#previews .file-row.dz-success .progress {
opacity: 0;
transition: opacity 0.3s linear;
}
/* Hide the delete button initially */
#previews .file-row .delete {
display: none;
}
/* Hide the start and cancel buttons and show the delete button */
#previews .file-row.dz-success .start,
#previews .file-row.dz-success .cancel {
display: none;
}
#previews .file-row.dz-success .delete {
display: block;
}
</style>
</head>
<body>
<div class="container" id="container">
<h2 class="lead">Configuration Demo</h2>
<div id="actions" class="row">
<div class="col-lg-7">
<!-- -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
</div>
<div class="col-lg-5">
<!-- -->
<span class="fileupload-process">
<div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</span>
</div>
</div>
<!--
data-dz-thumbnail： 【 <img /> ， alt src Dropzone 】
data-dz-name：
data-dz-errormessage：
data-dz-size：
data-dz-remove ： ，
data-dz-uploadprogress： 【( uploadprogress ， Dropzone style.width 0% 100% )】
-->
<div class="table table-striped files" id="previews">
<div id="template" class="file-row">
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name ></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<p class="size" data-dz-size></p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</div>
<div>
<button class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button data-dz-remove class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-dz-remove class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</div>
</div>
</div>
<script>
// Get the template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
//
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(document.body, { // body
url: "{{ url_for('upload_file') }}", // Set the url
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
previewTemplate: previewTemplate,
autoQueue: false, // ，
previewsContainer: "#previews", //
clickable: ".fileinput-button" // ， previewsContainer
});
myDropzone.on("addedfile", function(file) {
//
file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
});
// 1-100
myDropzone.on("totaluploadprogress", function(progress) {
document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});
myDropzone.on("sending", function(file) {
// ， ： 0， style.width = progress + "%" 100%
document.querySelector("#total-progress").style.opacity = "1";
//
file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});
// ，
myDropzone.on("queuecomplete", function(progress) {
document.querySelector("#total-progress").style.opacity = "0";
});
//
document.querySelector("#actions .start").onclick = function() {
myDropzone.enqueueFiles(myDropzone.getAcceptedFiles());
//myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED)); ，
};
//
document.querySelector("#actions .cancel").onclick = function() {
myDropzone.removeAllFiles(true);
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask upload with Dropzone example</title>
<link rel="stylesheet" href="{{ url_for('static', filename='dropzone.css') }}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css" />
<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='dropzone.js') }}"></script>
</head>
<body>
<div id="myId" class="dropzone" style="width: 500px; height: 300px;"></div>
<div id="aaa"></div>
<div id="preview-template" style="display: none;">
<div class="dz-preview dz-file-preview ">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-filename"><span data-dz-name></span></div>
<div class="dz-size" data-dz-size></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-success-mark"><span>✔</span></div>
<div class="dz-error-mark"><span>✘</span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;// Dropzone ，
$("#myId").dropzone({
url: "{{ url_for('upload_file') }}",
addRemoveLinks: true,
method: 'post',
filesizeBase: 1024,
previewTemplate: $('#preview-template').html(),//
autoQueue: true,
init: function() {
this.on("addedfile", function(file) {
$(".start").click (function() {
this.enqueueFile(file);
})
});
}
});
</script>
</body>
</html>
fllask 프레임 워 크 라면 테스트 할 수 있 습 니 다다운로드 하려 면 여 기 를 누 르 십시오phop 또는 기타 라면 다운로드 하지 않 아 도 됩 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Node.js를 사용하여 Chatwork에 이미지 업로드ChatworkAPI로 이미지를 업로드하고 싶을 때 curl을 사용하면 바삭바삭할 수 있습니다만, Node.js로 사용하고 싶은 경우의 경우도 있다고 생각합니다. 다만, 검색해 보면 Python과 ChatworkAP...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
