jQuery 업로드 진행률 및 AJAX 파일 업로드

jQuery 업로드 진행률 및 AJAX 파일 업로드

---

내 문제를 명확하게 전달하지 않은 것 같습니다. AJAX를 사용하여 파일을 보내야하고 Nginx HttpUploadProgressModule을 사용하여 파일의 업로드 진행률을 가져와야 합니다. 이 문제에 대한 좋은 해결책이 필요합니다. jquery.uploadprogress 플러그인을 사용해 보았지만 모든 브라우저에서 작동하고 AJAX를 사용하여 파일을 보내려면 많은 부분을 다시 작성해야합니다.

내가 필요한 것은이 작업을 수행하는 코드이며 모든 주요 브라우저 (Chrome, Safari, FireFox 및 IE)에서 작동해야합니다. 여러 파일 업로드를 처리하는 솔루션을 얻을 수 있다면 더 좋을 것입니다.

jquery.uploadprogress 플러그인 을 사용 하여 NginxHttpUploadProgressModule에서 파일의 업로드 진행률을 가져옵니다. 이것은 페이스 북 애플리케이션의 iframe 안에 있습니다. firefox에서 작동하지만 chrome / safari에서는 실패합니다.

콘솔을 열면 이것을 얻습니다.

Uncaught ReferenceError: progressFrame is not defined
jquery.uploadprogress.js:80

내가 어떻게 고칠 지 아십니까?

완료되면 AJAX를 사용하여 파일을 보내고 싶습니다. 어떻게 구현할까요?

편집 :
나는 곧 이것을 필요로하고 중요 하므로이 질문에 100 포인트 현상금을 넣을 것입니다. 먼저 답변 한 사람이 100 점을받습니다.

편집 2 :
Jake33이 첫 번째 문제를 해결하는 데 도움이되었습니다. ajax로 파일을 보내는 방법에 대한 응답을 먼저 남기는 사람도 100 점을받습니다.

---

요즘 AJAX로 파일 업로드가 가능합니다. 예, AJAX, swf 또는 java와 같은 엉뚱한 AJAX 워너비가 아닙니다.

이 예제는 도움이 될 수 있습니다 : https://webblocks.nl/tests/ajax/file-drag-drop.html

(드래그 / 드롭 인터페이스도 포함하지만 쉽게 무시됩니다.)

기본적으로 내려 오는 것은 다음과 같습니다.

<input id="files" type="file" />

<script>
document.getElementById('files').addEventListener('change', function(e) {
    var file = this.files[0];
    var xhr = new XMLHttpRequest();
    (xhr.upload || xhr).addEventListener('progress', function(e) {
        var done = e.position || e.loaded
        var total = e.totalSize || e.total;
        console.log('xhr progress: ' + Math.round(done/total*100) + '%');
    });
    xhr.addEventListener('load', function(e) {
        console.log('xhr upload complete', e, this.responseText);
    });
    xhr.open('post', '/URL-HERE', true);
    xhr.send(file);
});
</script>

(데모 : http://jsfiddle.net/rudiedirkx/jzxmro8r/ )

그래서 기본적으로 이것이 내려지는 것은 =)

xhr.send(file);

어디 file대해서 typeof입니다 Blob: http://www.w3.org/TR/FileAPI/

또 다른 (더 나은 IMO) 방법은 FormData. 이를 통해 1) 양식에서와 같이 파일 이름을 지정하고 2) 양식에서와 같이 다른 항목 (파일도)을 보낼 수 있습니다.

var fd = new FormData;
fd.append('photo1', file);
fd.append('photo2', file2);
fd.append('other_data', 'foo bar');
xhr.send(fd);

FormData 서버 코드를 더 깨끗하고 이전 버전과 호환되도록 만듭니다 (요청이 이제 일반 양식과 정확히 동일한 형식을 갖기 때문입니다).

모든 것이 실험적이지는 않지만 매우 현대적입니다. Chrome 8 이상 및 Firefox 4 이상은 수행 할 작업을 알고 있지만 다른 사람에 대해서는 모릅니다.

다음은 PHP에서 요청 (요청 당 이미지 1 개)을 처리 한 방법입니다.

if ( isset($_FILES['file']) ) {
    $filename = basename($_FILES['file']['name']);
    $error = true;

    // Only upload if on my home win dev machine
    if ( isset($_SERVER['WINDIR']) ) {
        $path = 'uploads/'.$filename;
        $error = !move_uploaded_file($_FILES['file']['tmp_name'], $path);
    }

    $rsp = array(
        'error' => $error, // Used in JS
        'filename' => $filename,
        'filepath' => '/tests/uploads/' . $filename, // Web accessible
    );
    echo json_encode($rsp);
    exit;
}

---

다음은 AJAX를 사용하여 파일을 업로드하는 몇 가지 옵션입니다.

• AjaxFileUpload- 페이지에 양식 요소가 필요하지만 페이지를 다시로드하지 않고 파일을 업로드합니다. 데모를 참조하십시오 .

• "파일"태그가 지정된 JQuery 플러그인 목록

• Uploadify- 플래시 기반 파일 업로드 방법입니다.

• 파일을 비동기 적으로 업로드하려면 어떻게해야합니까?

• AJAX 파일 업로드의 10 가지 예 -이것은 올해 게시되었습니다.

업데이트 : 다음은 다중 파일 업로드 를위한 JQuery 플러그인 입니다.

참고URL : https://stackoverflow.com/questions/4856917/jquery-upload-progress-and-ajax-file-upload