Google Chrome/Chromium 및 Safari에서 드래그 앤 드롭 파일을 업로드하시겠습니까?
드래그 앤 드롭 파일 업로드는 Firefox 3.6에서 실행할 수 있습니다.
구글에서 html5 드래그 앤 드롭 파일 업로드 -gmail을 검색하면 다음과 같은 정보를 얻을 수 있습니다.
- 파이어폭스 3.6에서의 네이티브 드래그 + 드롭 파일 업로드
- http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload
- http://www.thecssninja.com/javascript/drag-and-drop-upload
는 모두 ""를 사용합니다.FileReader 3되지 않음)getAsBinary(다른 브라우저에서도 지원되지 않습니다).
그러나 구글은 최근 파이어폭스뿐만 아니라 크롬에서도 드래그 앤 드롭 파일을 업로드할 수 있는 Gmail용 업데이트를 출시했으며 크롬에는 이 업데이트가 없다.밤에 최신 크롬을 사용하고 있는데 업로드 파일을 드래그 드롭할 수 있지만FileReader.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」<input type="file" />그러나 Gmail 업로더는 여러 파일을 드래그하여 처리할 수 있기 때문에 한 번에 하나의 파일만 지원할 수 있습니다.
문제는 어떻게 하냐는 거죠HTML5 파일 업로드를 위한 Chromium은 어떻게 지원합니까?또한 Safari를 지원합니까?
경고: 이것은 매우 오래된 버전의 Safari 및 Chrome에 대한 호환성 코드입니다.최신 브라우저는 모두 FileReader API를 지원합니다.다음 튜토리얼은 https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications 입니다.
이 코드는 Safari 5 이상 또는 Chrome 6 이상을 지원해야 하는 경우에만 사용할 수 있습니다.
한 가지 방법은 Swell에서 사용되는 방법을 사용하는 것입니다.JS:
<input type="file" multiple="multiple" />다음과 같이 합니다.
<form method="post" enctype="multipart/form-data" id="uploadform">
<input type="file" name="dragupload[]" multiple="multiple"
onchange="if (this.value) document.getElementById('uploadform').submit();" />
</form>
에는 력력음음음음음음음음음음음음음음음음 the the the the the the the the the the라고 스타일링할 수 .opacity: 0(절대) 업로드를 받아들이는 요소 위에 배치됩니다.는 체음음음음음음음음음음 an an an an an an an an an an an an an an an an an an an 에 넣을 수 .iframe처럼 행동한 것에 는 어떤 때까지 일 수 .업로드 요소는 어떤 것이 위로 끌릴 때까지 숨겨질 수 있습니다.
이러한 iframe은 다음과 같습니다.
<script>
<!--
var entered = 0;
-->
</script>
<body ondragenter="entered++;document.getElementById('uploadelement').style.display='block'" ondragleave="entered--;if (!entered) document.getElementById('uploadelement').style.display='none'">
<form method="post" enctype="multipart/form-data" id="uploadform">
Things can be dragged and dropped here!
<input type="file" id="uploadelement" name="dragupload[]" multiple="multiple" onchange="if (this.value) { document.getElementById('uploadform').submit(); }" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;" />
</form>
</body>
은, Safari Chrome 검출되었을 할 수 브라우저는 Safari 의 Chrome 의 앤 을 서포트하고 입니다).<input type="file" /> 및 HTML5 HTML5와 할 수 .drop파이어폭스 3.6+입니다.
이것이 Gmail이 사용하는 방법인지 아닌지는 알 수 없지만, 확실히 효과가 있습니다.
테크놀로지나 브라우저에 준거한 것에 흥미가 있는 경우가 있습니다.
Plupload는 다음 기능을 지원하므로 성능이 뛰어난 것 같습니다.
- 청킹
- 드래그/드롭
- PNG 크기 조정
- JPEG 크기 조정
- 유형 필터링
- 스트림 업로드
- 멀티파트 업로드
- 파일 크기 제한
- 업로드 진행 상황
다음과 같은 테크놀로지의 대부분에 대응하고 있습니다.
- 플래시
- 기어
- HTML 5
- 실버라이트
- 브라우저 플러스
또한 2010.05.27 이후 Chrome 베타에서 실행되는 HTML5의 드래그/드롭을 지원합니다.
난 크롬에서 아주 많은 탐정 일을 한 후에 뭔가 일을 하게 되었어.이것은 Chrome에서만 작동합니다.Safari에서는 프리즈가 됩니다.파이어폭스에서는 파일을 드롭할 수 없습니다.대신 IE가 드롭된 파일을 엽니다.Chrome에서도 드래그 앤 드롭은 어떤 이유로든 한 번만 작동하며 그 후에는 페이지를 새로 고쳐야 합니다.(이벤트 핸들러에 문제가 있을 가능성이 있습니다).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
window.onload = function () {
var div = document.getElementById('div');
div.ondragenter = div.ondragover = function (e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
return false;
}
div.ondrop = function (e) {
for (var i = 0; i < e.dataTransfer.files.length; i++) { // e.dataTransfer is a DataTransfer object (https://developer.mozilla.org/En/DragDrop/DataTransfer), e.dataTransfer.files is a FileList object (https://developer.mozilla.org/en/DOM/FileList)
var file = e.dataTransfer.files[i]; // file is a File object (https://developer.mozilla.org/en/DOM/File)
var xhr = new XMLHttpRequest;
xhr.open('post', 'handler.php', true);
xhr.onreadystatechange = function () {
if (this.readyState != 4)
return;
document.body.innerHTML += '<pre>' + this.responseText + '</pre>';
}
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.setRequestHeader('X-File-Name', file.fileName);
xhr.setRequestHeader('X-File-Size', file.fileSize);
xhr.send(file); // For some reason sending the actual File object in Chrome works?
}
e.preventDefault();
return false;
}
}
</script>
</head>
<body>
<div id="div" style="width: 100%; height: 200px; border: 1px solid blue">Drop here</div>
</body>
</html>
핸들러php:
// This is not a true file upload. Instead, it sends the raw data directly.
echo htmlentities(file_get_contents('php://input'));
iframe을 사용하여 의사 에이잭스를 업로드할 필요가 없습니다.Chrome과 Safari는 둘 다 진행률 이벤트와 함께 XHR2 업로드를 지원하므로 진행률 표시줄 등을 수행할 수 있습니다.
자체 어플리케이션의 경우 FireFox 전용 드래그 앤 드롭을 실시합니다.다른 사용자는 기존의 iframe 업로드로 되돌립니다.드래그 앤 드롭이 서포트되고 있는 것을 검출하기 위해서, 다음의 코드를 실행합니다.
if (typeof(window.File) == 'object' && typeof(window.FileReader) == 'function' && typeof(window.FileList) == 'object') {
// DnD is supported!
}
이게 도움이 됐으면 좋겠다.
html5dlaribrary를 사용할 수 있습니다.http://code.google.com/p/html5uploader/
Firefox, Safari 및 Chrome에서 작동합니다.
최신 브라우저 지원 파일 업로드가 정상입니다.다음을 사용할 수 있습니다.
xhr = new XMLHttpRequest();
xhr.open('POST', targetPHP, true);
var formData = new FormData();
formData.append('upload',file);
xhr.send(formData);
경계나 헤드를 설정할 필요는 없습니다.이렇게 하면 문제없이 동작합니다.이 코드를 클라이언트:firefox 6.02 및 chrome 13. server:tomcat with "spring mvc"에서 테스트했습니다.
FormData를 사용하여 파일을 저장한 후 업로드할 수 있습니다.
function setUp(){
var dropContainer = document.getElementById("container");
dropContainer.addEventListener("drop",dropHandler,false);
dropContainer.addEventListener("dragenter", function(event){event.stopPropagation();event.preventDefault();}, false);
dropContainer.addEventListener("dragover", function(event){event.stopPropagation();event.preventDefault();}, false);
dropContainer.addEventListener("drop", dropHandler, false);
getResult()
}
function dropHandler(event){
var files = event.dataTransfer.files;
var count = files.length;
form = new FormData();
for(var i= 0;i<count;i++){
form.append("file"+i, files[i]);
}
sendData();
}
function sendData(){
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.open("POST", "/upload");
xhr.send(form);
var progressBar = document.getElementById('progressBar');
progressBar.style.display = 'block';
progressBar.style.width = '0px';
}
데모는 이쪽(http://flexinnerp.appspot.com/)에서 즐기세요:)
다음과 같은 다중 특성 설정:
입력 유형="file" name="file1" multiple="file" class="DropHere"
다음 CSS DropHere 클래스를 사용합니다.
.DropHere
{
height: 100px;
padding: 3px;
border: 2px dashed #555;
border-radius: 5px;
cursor: default;
background-image:url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='220px'><text x='55' y='75' font-size='20'>or drop files here</text></svg>");
background-repeat: no-repeat;
}
파일 필드는 다음과 같습니다.
asp.net을 사용하시는 분은 이 기사를 좋아하실 수도 있습니다.제가 쓴 기사 "Multiple file upload with progress bar and drag and drop" : http://www.codeproject.com/Articles/818561/Multiple-file-upload-with-progress-bar-and-drag-an
언급URL : https://stackoverflow.com/questions/2657653/drag-and-drop-file-upload-in-google-chrome-chromium-and-safari
'programing' 카테고리의 다른 글
| 고유한 값을 반환하는 Oracle의 LISTAGG (0) | 2023.03.06 |
|---|---|
| Angularjs 라디오 버튼 (0) | 2023.03.06 |
| xcode 8 Swift 3에 첨자 멤버가 없는 '임의' 유형 (0) | 2023.03.06 |
| json 데이터를 데이터 프레임으로 가져오기 (0) | 2023.03.06 |
| 입력에서 값 가져오기(각도)JS) (0) | 2023.02.16 |