jQuery를 통한 Gmail like 파일 업로드
구글 메일처럼 파일을 업로드하고 싶습니다.jQuery와 PHP를 사용하여 진행 표시줄 등을 얻을 수 있는 방법이 있습니까?
여기에 구글이 어떻게 하는지 동영상을 추가했습니다.http://dl.getdropbox.com/u/5910/Jing/2009-04-02_1948.swf
플래시, 펄 또는 cgi는 사용하지 마십시오.
진행 표시줄 없이도 살 수 있을 것 같습니다. 지금 저는 실제로 jquery 플러그인에 대한 정보나 제가 봐야 할 것들을 찾고 있습니다.
사람들이 지메일 인터페이스에서 swf 파일을 쉽게 볼 수 있는데 지메일이 플래시를 사용하지 않는다고 말하는 것은 이상합니다.파일 첨부를 마우스 오른쪽 단추로 클릭합니다.그것은 무엇보다도 한 번에 여러 개의 업로드를 가능하게 하는 것입니다.
가장 쉬운 방법은 SWFoad를 사용하는 것입니다. 이는 플래시로 작성된 작은 버튼이며 JS로 구동할 수 있는 모든 후크가 달려 있습니다.매우 사용하기 쉽고 PHP와 잘 작동합니다.
하지만 순수한 JS를 원한다면 서버의 도움이 필요할 것입니다. 특히 업로드를 시작하고 서버에 주기적으로 문의해야 합니다.불행하게도, PHP 업로드 처리는 다운로드가 완료될 때까지 어떠한 알림도 받지 않습니다.당신은 그것을 다른 것으로 대체해야 할 것입니다.그것 때문에 샘플 Perl 서버 코드를 포함하는 몇 개의 순수한 JS 업로더가 있습니다.
IOW: JS와 PHP는 (완전하게) 자르지 않습니다.클라이언트에 플래시를 추가하거나 서버에 더 나은 업로드 핸들러를 추가할 수 있습니다.
내 생각에 이 주제에 대한 훌륭한 기사: http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html
안타깝게도 IE와 Opera에 대한 지원이 부족하지만, 이것이 바뀌기를 바랍니다.
Uploadify는 jquery를 사용하는 또 다른 swf(sorry) 업로드 버튼입니다.하비에르가 언급한 것과 같은 생각입니다.
PHP는 업로드 진행 상황을 직접 보고하는 것을 지원하지 않습니다.따라서 업로드 상태를 다시 읽을 수 없습니다.그러나 작동할 수 있는 패치가 있습니다.시도해 본 적은 없지만.
Gmail은 플래시를 사용하여 백그라운드에서 파일을 업로드합니다.SWFpload는 비슷한 것을 적대시하는 오픈 소스 프로젝트입니다.
...gmail은 스타일 표시: 숨김이 있는 iFrame을 사용합니다. 그런 다음 양식에 업로드하면 iFrame을 업로드 URL로 보냅니다.관련된 플래시는 전혀 없습니다.구글이 지메일의 플래시로 하는 유일한 일은 채팅을 위해 소리를 내는 것입니다.그리고 당신은 그것을 환경에서 허용해야 합니다.메모리 및 CPU 사용량이 매우 나쁘다는 이유만으로 플래시를 많이 사용하지는 않습니다.Javascript는 플래시가 할 수 있는 모든 것을 할 수 있지만(경우에 따라 코드가 더 많은 Albiet) Javascript는 99%의 경우 훨씬 빠르고 메모리 측면에서 더 좋습니다.
플업로드를 사용할 수도 있습니다.다양한 유형을 지원하고 사용자 지정이 가능합니다.데모는 웹사이트에서 확인하실 수 있습니다.또한 홈페이지에서 지원하는 내용과 폴백 메커니즘을 보여줍니다.
편집: jQuery 플러그인으로 사용할 수 있습니다.
SWF로드는 모든 유형의 웹 애플리케이션과 호환됩니다.
Ajax가 양식 제출 중에 이진 데이터를 지원하지 않는 경우.해결 방법이 있습니다. 만약 당신이 jQuery라면 여기 http://www.malsup.com/jquery/form/ 에서 이 Form Plugin(malsup에서)을 사용할 수 있습니다.몇 년 동안 사용해 왔습니다.
또한 업로드도 유망해 보입니다.그것에 대해 엄지손가락을 들어;) 나는 그것이 약간 부피가 크다고 말해야 합니다!!!
2018년에는 일반 JavaScript를 사용하는 웹 사이트에서 Google Mail이 메일 첨부 파일에 대해 수행하는 것과 같은 파일을 업로드할 수 있습니다.한 번의 클릭으로 웹 브라우저의 파일 탐색기 대화상자가 나타날 수 있습니다.업로드를 시작하는 데 별도의 제출 버튼이 필요하지 않습니다. HTML을 입니다.<input type="file">요소
HTML 및 JavaScript 예제:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>File Upload</title>
<!-- Demo a button to upload files from a local computer to a web server. -->
</head>
<body>
<input type="file" id="inputFileElement" multiple style="display:none">
<button id="fileSelectButton">Select some files</button>
<script>
const fileSelectButton = document.getElementById("fileSelectButton");
const inputFileElement = document.getElementById("inputFileElement");
// When the user presses the upload button, simulate a click on the
// hidden <input type="file"> element so the web browser will show its
// file selection dialog.
fileSelectButton.addEventListener("click", function (e) {
if (inputFileElement) {
inputFileElement.click();
}
}, false);
// When the user selects one or more files on the local host,
// upload each file to the web server.
inputFileElement.addEventListener("change", handleFiles, false);
function handleFiles() {
const fileList = inputFileElement.files;
const numFiles = fileList.length;
for (let i = 0; i < numFiles; i++) {
const file = fileList[i];
console.log("Starting to upload " + file.name);
sendFile(file);
}
}
// Asynchronously read and upload a file.
function sendFile(file) {
const uri ="serverUpload.php";
const xhr = new XMLHttpRequest();
const fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log("Finished uploading: " + xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
}
</script>
</body>
</html>
PHP 코드:
<?php
if (isset($_FILES['myFile'])) {
// Example:
move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
echo $_FILES['myFile']['name'];
exit;
}
?>
이것은 Internet Explorer 11, Edge, Firefox, Chrome, Opera에서 작동합니다.이 예제는 https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications 에서 파생되었습니다.
진행률 표시줄은 XMLHttpRequest에서 진행률을 가져오는 방법을 참조하십시오.
언급URL : https://stackoverflow.com/questions/710852/gmail-like-file-upload-with-jquery
'it-source' 카테고리의 다른 글
| jQuery 위치 href (0) | 2023.08.24 |
|---|---|
| EmptyError: 순서에 요소가 없습니다. (0) | 2023.08.24 |
| HTML 또는 Javascript에서 PHP 파일을 호출하는 방법 (0) | 2023.08.24 |
| powershell 아직 할당되지 않은 변수 테스트 (0) | 2023.08.24 |
| 파워셸을 통해 컬을 실행합니다 - 인수를 구성하는 방법은 무엇입니까? (0) | 2023.08.24 |