안녕 얘들 아. 기본적으로 사용자가 웹 페이지를 열고 양식의 확인란 목록에서 선택하고 양식이 제출되면 모든 파일을 함께 다운로드해야합니다. 주로 모바일 기기 단일 요청으로 여러 파일 다운로드 (jQuery/Python)
- 플랫폼은 다음과 같습니다 는 클라이언트 나에 부과 된 제한 사항입니다 다운로드 받아야하며 스트리밍되지 않음
그래서 저는 프론트 엔드에 jQuery Mobile 1.0a3 및 백엔드에 Apache w/Python 2.6이 설치된 XHTML/CSS를 사용하여 웹 응용 프로그램을 만들었습니다. 다운로드 할 대상 파일은 .mp3 파일입니다.
서버에서 전달되고 AJAX를 통해 jQuery에 의해로드 된 숨겨진 iframe을 사용하여 바탕 화면에 원하는 효과를 성공적으로 수행했지만 기본 Android 브라우저 또는 Dolphin 브라우저에서는 작동하지 않습니다. 그 문제가되지 않습니다, 그래서
또한<Files *.mp3>
ForceType application/octet-stream
Header set Content-Disposition attachment
</Files>
, 아파치의 "헤더"모듈이 사용 가능합니다 ("헤더 설정"config 매개 변수에 필요한) :
나는 나의 아파치 설정이 다운로드 동작을 강제로 확인했다.
선택한 모든 항목을 매개 변수로 사용하여 서버에 AJAX 호출을하고 서버가 항목 배열을 읽으면 각 항목에 대한 정보를 데이터베이스에 쿼리합니다 (예 : 각 mp3 파일의 URL). 그런 다음 iframe 코드가 각 mp3 파일의 백엔드에서 생성 된 다음 jQuery의 $.load() 함수로 보내 져서 새 iframe (mp3을 다운로드 함)을로드합니다.
, 여기의 매우 짧은 테스트 케이스 무엇 내가 뭘 :
서버 측
def download(req):
resultDiv = """<div id="downloads">"""
queryIds = []
for element in req.form:
# "element" contains the id number that matches database record
trackId = re.match('^track(\d+)', element).group(1)
queryIds.append(trackId)
conn = MySQLdb.connect(host='localhost', user='fake', passwd='fake', db='fake')
cursor = conn.cursor()
buildQuery = """\
SELECT filePath FROM tracks
WHERE trackNum in ("""
buildQuery += ','.join(queryIds)
buildQuery += ')'
cursor.execute(buildQuery)
downloadRows = cursor.fetchall()
for track in downloadRows:
resultDiv += """
<iframe src="%s"></iframe>
""" % track[0]
return resultDiv
클라이언트 측
<!DOCTYPE html>
<html>
<head>
<!-- INCLUDES FOR JQUERY MOBILE AND JQUERY -->
<style type="text/css">
.invisible {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#albumForm').submit(function(e) {
e.preventDefault();
// this will hold the selected items on the form
selTracks = {};
$('#trackList').find(':checked').each(function() {
selTracks[this.id] = 'on';
});
// load the iframes into a 'div' set aside for that purpose
$('#results').load('control.py/download #tracks', selTracks);
});
});
</script>
</head>
<body>
<div data-role='page' id='page'>
<div data-role='header' id='header'>
</div>
<div data-role='content' id='content'>
<div id='container'>
<form id='albumForm'>
<div data-role='controlgroup' data-role='fieldcontain'>
<input type='checkbox' name='track1' id='track1' />
<label for='track1' id='track1label'>Track 1</label>
<input type='checkbox' name='track2' id='track2' />
<label for='track2' id='track2label'>Track 2</label>
<input type='checkbox' name='track3' id='track3' />
<label for='track3' id='track3label'>Track 3</label>
<input type='submit' id='downloadButton' value='Download' />
</div>
</form>
</div>
<div id='results' class='invisible'>
</div>
</div>
<div data-role='footer' id='footer'>
</div>
</div>
</body>
</html>
죄송합니다 코드는 너무 일반적이어서 (그리고 상당히 짧아진다), 나는 ctual 코드 (당신은 그것이 어떻게되는지 압니다). 그러나 이것은 기본적으로 그것의 요지입니다. 나는이 문제가 모바일 브라우저의 해석이나 어딘가의 HTTP 헤더 어딘가에있을 것이라고 생각한다. 이 작업은 Chrome 및 Firefox의 데스크톱에서 수행되며 Android 용 Fennec에서 실제로 예상대로 작동합니다 (더 이상 상호 작용하지 않고 모든 파일을 다운로드하고 알림 바에 표시). 나는 모든 사람들이 Fennec을 사용한다고 가정 할 수 없다.
- JSON은 서버에서 반환하고, iframe을은 jQuery를 하여 클라이언트에 생성 : 위 외에도
- JSON은 서버에서 반환, 그리고에 대한 루프는
- JSON 서버에서 반환 된 각 URL에 대한
window.open()를 호출 jQuery를 만든<a>태그와click()는 - 를 사용하여 다른 트리거 (
- 서버에
req.sendfile()를 호출location.href또는window.location(분명히, 한 번 할 경우에만 가능) - 수정 :적인 doctypes
것은 여기에 내가 데스크톱 또는 모바일 중 하나가 작동하지 않았다 시도 무엇 어쩌면 내가 잘못하고있는 거지?)
- 서버에
- 서버에서 설정된 경계를 가진 multipart/form-data 및 덤프 바이너리 데이터를 반환합니다. (아주 엉망입니다.)이 메시지는 잘못된 것입니까?
, I (모든되지 모바일 바탕 화면에 근무하지만이있는) 다음과 같은 노력했습니다
아직 기쁨이 없습니다. 나는 무엇을 놓칠 수 있 었는가?
P. 숨겨진 iframe을 사용하여 나를 화나게하지 마십시오 ...
EDIT : FTP와 같은 서버에서 설정할 수있는 다른 기본 브라우저 프로토콜을 사용해도 괜찮습니다. 모든 아이디어를 환영합니다.
업데이트 : 클라이언트에서 서버로 FTP 연결을 시작하고 "mget"을 실행하려고합니다. net2ftp가이 작업을 수행 할 수 있다는 것을 알고 있습니다 ... 이제는 그것을 파악하십시오.) 새로운 아이디어가 아직 남아 있습니다.
당신은'