모바일 단말 HTML5로 파일업로드_HTML/Xhtml_웹페이지 제작 구현

PC 측에 업로드되는 대부분의 파일은 플러그인을 사용합니다. 플래시를 도입해도 문제가 되지 않습니다. 그러나 모바일 측에서 여전히 다양한 중복 플러그인을 사용한다면 프로젝트가 필요하게 될 것입니다. H5에는 이미 관련 인터페이스가 있으므로 이미지 업로드 기능을 갖기 위해 호환성도 좋습니다. 물론 구현 시 H5를 사용하는 것이 우선입니다.

사용된 주요 기술은 다음과 같습니다.

아약스

파일리더

양식데이터

HTML 구조:

XML/HTML 코드클립보드에 콘텐츠 복사

1. <div class="카메라 영역"> 
2.  <form enctype="multipart/ 양식 데이터" 방법="게시물">
3.  <입력 유형="파일" 이름="fileToUpload" 클래스="fileToUpload" 수락="image/*" 캡쳐="카메라"/>
4.  <div class="업로드- 진행률"><스팬>스팬>div>
5. 양식>
6.  <div class="thumb" >div>
7. div>

패키지 upload.js는 zepto에 따라 다릅니다

JavaScript 코드클립보드에 콘텐츠 복사

1. (기능($) {   
2.   $.extend($.fn, {   
3.     fileUpload: 기능(선택) {   
4.       이.each(함수() {   
5.         var $self = $(이것);   
6.         var doms = {   
7.           "fileToUpload": $self.find(".fileToUpload"),   
8.           "thumb": $self.find(".thumb"),   
9.           "진행": $self.find(".upload-progress")   
10.         };   
11.         var funs = {   
12.           //选择文件，获取文件大小，也可以在这里获取文件格式，限主传不要求格式的文件   
13.           "fileSelected": 기능() {   
14.             var 파일 = (doms.fileToUpload)[0].files;   
15.             var 개수 = files.length;   
16.            for (var index = 0; index < count; index ) {   
17.               var 파일 = 파일[색인];   
18.               var fileSize = 0;   
19.               (file.size > 1024 * 1024)   
20.                fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString()   'MB';   
21.               그 밖에  
22.                fileSize = (Math.round(file.size * 100 / 1024) / 100).toString()   'KB';   
23.             }
24. funs.uploadFile()
25. },
26.  //비동기식 파일 업로드
27. uploadFile: 함수() {
28.  var fd = new FormData();//양식 데이터 객체 생성
29. var files = (doms.fileToUpload)[0].files;
30. var 개수 = 파일 길이
 
31. for (var index = 0; index < count; index ) {
32. var 파일 = 파일[색인]
fd.append(opts.file, file);
33. //양식 데이터에 파일 추가
funs.previewImage(file);
34. //업로드하기 전에 이미지를 미리 보거나 다른 방법으로 txt를 미리 봅니다.
                                                    
var
36. xhr = new XMLHttpRequest() xhr.upload.addEventListener(
"진행"
37. , funs.uploadProgress, false); // 업로드 진행 상황 모니터링 xhr.addEventListener(
"load"
38. , funs.uploadComplete, false); > xhr.addEventListener("오류"
, opts.uploadFailed,
39. false); > xhr.open("POST", opts.url)
40. xhr.send(fd) },
41. //파일 미리보기
42. 미리보기 이미지: 기능(파일) {
43. var 갤러리 = doms.thumb;
44. var img = document.createElement("img")
img.file = 파일
doms.thumb.html(img)
 
47. //FileReader 메서드를 사용하여 이미지 콘텐츠 표시
48. var reader = new FileReader()
reader.onload = (
49. 함수(aImg) {
50. 반환 기능(e) {
aImg.src = e.target.result
                                          
52. })(img)
53. reader.readAsDataURL(파일)
54. },
55. uploadProgress:
기능
56. (evt) {
if
57. (evt.lengthComputable) {
var
58. ratesComplete = Math.round(evt.loaded * 100 / evt.total) doms.progress.html(percentComplete.toString()
'%'
59. )                                                     
},
61. "업로드 완료"
:
62. 기능(evt) { 경고(evt.target.responseText)
                                                          
63. };
64. doms.fileToUpload.on("변경", 함수() {
65. doms.progress.find("span").width("0"); >
66. funs.fileSelected()
67. })
68. })
69. }
70. })
71. })(젭토)

전화 방법:

JavaScript 코드클립보드에 콘텐츠 복사

1. $(".camera-area").fileUpload({
2.  "url": "savetofile.php", 
3.  "파일": "myFile"
4. })

PHP 부분:

PHP 코드클립보드에 콘텐츠 복사

2. if (isset($_FILES['myFile'])) {
3. // 예:
4. writeLog($_FILES)
5. move_uploaded_file($_FILES['myFile']['tmp_name'], "업로드/" . $_FILES['myFile']['이름'])
6. 에코 '성공'
7. }
8. 함수 writeLog($log){
9.  if(is_array($log) | | is_object($log)){
10. $log = json_encode($log); }
11.  
12. $log = $log."rn"
13.  
14. file_put_contents('log.log', $log,FILE_APPEND) }
15. ?>

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

원문: http://www.cnblogs.com/hutuzhu/p/5254532.html