行動端HTML5實作檔案上傳_HTML/Xhtml_網頁製作

PC端上傳文件多半用插件，引入flash都沒關係，但是移動端要是還用各種冗餘的插件估計得被噴死，項目裡面需要做圖片上傳的功能，既然H5已經有相關的接口且相容性良好，當然優先考慮用H5來實現。

用的技術主要是：

ajax

FileReader

FormData

HTML結構：

XML/HTML Code複製內容到剪貼簿

1. div class=class=class=
」 >
2. >         form enctype  method="post"
3. >"post">"post"> >         input type type type類型 name="fileToUpload"  >"fileToUpload" accept="image/*"
4. capture="camera"/>             div div div div div div
5.  div div div
6.  >span>span >div>  
7.         form> 🎜>>
8.  🎜>>
 

      

div

 class

 class>div>     div>      已經封裝好的upload.js，依賴zepto JavaScript Code複製內容到剪貼簿

1. (函數($) {   
2.   $.extend($.fn, {   
3.     檔案上傳：函數（選取）{   
4.       這個.each(函數() {  >
        
5. var $self = $(這個這這個
6.         var doms = {   
7.           "fileToUpload": $self.find(: $self.find(
: $self.find(
8. >           "拇指": $self.find( >           
9. 「進度」: $self.find(         }；           
var
10.  有趣 = {   
11.           //選擇文件，以取得檔案大小，並在此取得檔案格式，並可限制使用者上傳未要求格式的檔案   
12.           "fileSelected": 
13.             var files = (doms.fileToUpload)[0]. files = (doms.fileToUpload)[0]. files = (doms.fileToUpload)[0]. files = (doms.fileToUpload)[0]. files = (doms.fileToUpload)[0]。             
14. var count = files.length;              for
15.  (               var
16.  file =                var fileSize = 0;   fileSize = 0;   fileSize = 0;  
17.               if (檔案大小 > 1024  
18.                 fileSize = (Math.round(file.size * 100 / (1024  ';                  
19. 其他                   fileSize = (Math.round(file.size * 100 / 1024) / 100).* 100 / 1024) / 100). 🎜>;   
20.             }  
21.             funs.uploadFile();   
22.           },   
23.           //非同步上傳檔案   
24.           uploadFile: function() {   
25. () {                var fd =  fd = 
  
26.             var
 files = (doms.fileToUpload)[0].files;
27.             var count = files.length;
            
28. for (               var
29.  file =                fd.append(opts.file, file);//將檔案加入表單資料>               funs.previewImage(file);
30. //上傳前預覽圖片，也可透過其他方式預覽             }                
31. var xhr =  >             xhr.upload.addEventListener(
"progress"
32. , //監聽上傳進度
33.                xhr.addEventListener("load", funs.upload
            xhr.addEventListener(
34. "error", opts.uploadFailed, > 🎜>             xhr.open("POST",               xhr.send(fd);   
35.           },   
36.           //檔案預覽   
37.           previewImage: function(file) {   
38.             var gallery = 
            
39. var img = . 🎜>             img.file = file;                doms.thumb.html(img);   
40.             
// 使用FileReader方法顯示圖片內容
41.   
42.             var
 reader = 
43.             reader.onload = (function              return
                 aImg.src = e.target.result;                  };   
44.             })(img);                reader.readAsDataURL(file);              },   
45.           uploadProgress: 
function
46. (evt) {  
(evt) { 
47.             
if
48.  (evt.lengthComp  
49.               
50. var percentComplete  Math。 🎜>               doms.progress.html(percentComplete.toString()   '%'
51.             }              },   
52.           "uploadComplete": 
53. function: function             alert(evt.target.responseText)   
54.           }   
55.         };   
56.         doms.fileToUpload.on("change",           doms.progress.find("span"
).width(
57. >           funs.fileSelected();            });   
58.       });   
59.     }   
60.   });   
61. })(Zepto);  
62. 呼叫方法：
63. JavaScript Code

複製內容到剪貼簿

$(".camera-area"

).fileUpload({   

1.         "url": "savetofile.php"
2. "savetofile.php"         "file": 
"myFile"
3. : "myFile": "myFile"       });   
PHP部分：

PHP Code

複製內容到剪貼簿

if

 (isset($_FILES['my🎜>['my🎜>'my> 🎜>])) {        

// Example:        writeLog(

$_FILES);        move_uploaded_file(

$_FILES['myFile'['myFile'], "uploads/" . $_FILES[$_FILES[[m >]['name']);   

    echo 'successful';   

}   

function writeLog($log){   $log

){   

$log){   $log){   $log){   $log){   $log){        if(

is_array

is_object($log)){   

        $log

 = json_encode($log    }        $log = 

$log.

$log。;           file_put_contents(

'log.log', 🎜>,FILE_APPEND);   

}   

?>   

以上就是本文的全部內容，希望對大家的學習有所幫助。

原文：http://www.cnblogs.com/hutuzhu/p/5254532.html