Chrome / Chromium 및 Safari에서 끌어서 놓기 파일 업로드?
드래그 앤 드롭 파일 업로드는 Firefox 3.6에서 수행 할 수 있습니다.
html5 드래그 앤 드롭 파일 업로드 -gmail에 대한 Google 검색 은 다음과 같은 정보를 제공합니다.
- Firefox 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(또는 getAsBinary다른 브라우저가 지원하지 않는 Firefox 3.6의 deprecated )를 사용 합니다.
그러나 Google은 최근에 Firefox뿐만 아니라 Chromium에서 드래그 앤 드롭 파일 업로드를 허용하는 Gmail 업데이트를 출시했으며 Chromium 에는FileReader . 최신 Chromium 야간을 사용하고 있으며 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 및 이전 버전을 지원해야하는 경우에만 유용합니다.
한 가지 가능성은 SwellJS에서 사용 되는 방법을 사용하는 것입니다 .
다음 <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>
입력 요소 opacity: 0는 업로드를 허용하는 요소 위에 (절대적으로) 위치 하도록 스타일을 지정할 수 있습니다 . 전체 양식은 iframe"의사 -Ajax"와 같은 동작을 위해 내부에 배치 할 수 있습니다 . 그리고 업로드 요소는 무언가를 드래그 할 때까지 숨겨진 레이어가 될 수 있습니다.
이러한 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이 감지 된 경우에만 수행해야하며 (다른 브라우저는 <input type="file" />요소에 대한 드래그 앤 드롭을 지원하지 않기 때문에 ) dropFirefox 3.6+ 용 HTML5 이벤트 와 함께 사용할 수 있습니다 .
이것이 Gmail이 사용하는 방법인지는 알 수 없지만 확실히 작동합니다.
더 많은 기술 및 브라우저 호환에 관심이있을 수 있습니다.
나에게 보인다 Plupload는 다음과 같은 기능을 지원하고, 잘 수행합니다
- 청킹
- 드래그 앤 드롭
- PNG 크기 조정
- JPEG 크기 조정
- 유형 필터링
- 스트림 업로드
- 멀티 파트 업로드
- 파일 크기 제한
- 업로드 진행률
다음 기술의 대부분 :
- 플래시
- 기어
- HTML 5
- Silverlight
- BrowserPlus
예, 2010.05.27부터 Chrome 베타에서 실행되는 HTML5의 드래그 / 드롭을 지원합니다.
탐정 작업을 많이하고 나서 Chrome에서 뭔가 작동하는 것을 얻었습니다. 이것은 Chrome 에서만 작동합니다. Safari에서는 멈 춥니 다. Firefox에서는 파일을 놓을 수 없습니다. 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>
handler.php:
// This is not a true file upload. Instead, it sends the raw data directly.
echo htmlentities(file_get_contents('php://input'));
You wouldn't need to use an iframe to do pseudo ajax uploading. Chrome and Safari both support XHR2 uploads with progress events so you can do progress bars etc.
For our own application, we do drag and drop for FireFox only. We revert to the traditional iframe upload for others. In order to detect that drag and drop is supported, we run this code:
if (typeof(window.File) == 'object' && typeof(window.FileReader) == 'function' && typeof(window.FileList) == 'object') {
// DnD is supported!
}
Hope this is helpful to some.
You can use html5uploader library: http://code.google.com/p/html5uploader/
It works with Firefox, Safari and Chrome.
The latest browser support file upload well. You could use:
xhr = new XMLHttpRequest();
xhr.open('POST', targetPHP, true);
var formData = new FormData();
formData.append('upload',file);
xhr.send(formData);
You do not need to set boundary or any head，just like this it works fine. I tested this code in client:firefox 6.02 and in chrome 13. server:tomcat with "spring mvc"
you can use FormData to store the File, then upload it. e.g
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';
}
the demo is here(http://flexinnerp.appspot.com/) just enjoy it :)
Set multiple attribute like:
input type="file" name="file1" multiple="multiple" class="DropHere"
and use this CSS DropHere class:
.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;
}
The file field will now look like:
If you use asp.net you might also like this article I wrote "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
'Programing' 카테고리의 다른 글
| Timely와 같은 아름답고 세련된 앱을 만드는 방법 (0) | 2020.11.09 |
|---|---|
| HTTP Put은 어떻게합니까? (0) | 2020.11.09 |
| Varargs Java 모호한 호출 (0) | 2020.11.09 |
| 포인터에 메모리 할당 여부 확인 (0) | 2020.11.09 |
| Entity Framework-Include ()없이 자식 엔터티를 자동으로 즉시로드하는 방법이 있습니까? (0) | 2020.11.09 |