Implement File Upload _ HTML/Xhtml _ web page creation using HTML5 on the Mobile End

This article mainly introduces the materials related to file upload through HTML5 on the Mobile End, and uses H5 to Easily upload files. If you are interested, refer to the plug-ins used to upload files on the PC end, it does not matter if flash is introduced. However, if the Mobile End still needs to be sprayed with redundant plug-ins, the project needs to upload images, since H5 already has related interfaces and is compatible with each other, H5 is preferred.

The main technologies used are:

Ajax

FileReader

FormData

HTML structure:

Copy XML/HTML Code to clipboard

The encapsulated upload. js depends on zepto.

Copy the content to the clipboard using JavaScript Code

1. (Function ($ ){
2. $. Extend ($. fn ,{
3. FileUpload: function (opts ){
4. This. each (function (){
5. Var $ self = $ (this );
6. Var doms = {
7. "FileToUpload": $ self. find (". fileToUpload "),
8. "Thumb": $ self. find (". thumb "),
9. "Progress": $ self. find (". upload-progress ")
10. };
11. Var funs = {
12. // Select a file to obtain the file size. You can also obtain the file format here to restrict users from uploading non-required files.
13. "FileSelected": function (){
14. Var files = (doms. fileToUpload) [0]. files;
15. Var count = files. length;
16. For (var index = 0; index <count; index ++ ){
17. Var file = files [index];
18. Var fileSize = 0;
19. If (file. size & gt; 1024*1024)
20. FileSize = (Math. round (file. size * 100/(1024*1024)/100). toString () + 'mb ';
21. Else
22. FileSize = (Math. round (file. size * 100/1024)/100). toString () + 'kb ';
23. }
24. Funs. uploadFile ();
25. },
26. // Uploads files asynchronously.
27. UploadFile: function (){
28. Var fd = new FormData (); // create a form data object
29. Var files = (doms. fileToUpload) [0]. files;
30. Var count = files. length;
31. For (var index = 0; index <count; index ++ ){
32. Var file = files [index];
33. Fd. append (opts. file, file); // Add the file to the form data.
34. Funs. previewImage (file); // preview the image before upload. You can also preview the image by using other methods.
35. }
36. Var xhr = new XMLHttpRequest ();
37. Xhr. upload. addEventListener ("progress", funs. uploadProgress, false); // listen to the upload progress
38. Xhr. addEventListener ("load", funs. uploadComplete, false );
39. Xhr. addEventListener ("error", opts. uploadFailed, false );
40. Xhr. open ("POST", opts. url );
41. Xhr. send (fd );
42. },
43. // File Preview
44. PreviewImage: function (file ){
45. Var gallery = doms. thumb;
46. Var img = document. createElement ("img ");
47. Img. file = file;
48. Doms.thumb.html (img );
49. // Use the FileReader method to display the image content
50. Var reader = new FileReader ();
51. Reader. onload = (function (aImg ){
52. Return function (e ){
53. AImg. src = e.tar get. result;
54. };
55. }) (Img );
56. Reader. readAsDataURL (file );
57. },
58. UploadProgress: function (evt ){
59. If (evt. lengthComputable ){
60. Var percentComplete = Math. round (evt. loaded * 100/evt. total );
61. Doms.progress.html (percentComplete. toString () + '% ');
62. }
63. },
64. "UploadComplete": function (evt ){
65. Alert(evt.tar get. responseText)
66. }
67. };
68. Doms. fileToUpload. on ("change", function (){
69. Doms. progress. find ("span"). width ("0 ");
70. Funs. fileSelected ();
71. });
72. });
73. }
74. });
75. }) (Zepto );

Call method:

Copy the content to the clipboard using JavaScript Code

1. $ (". Camera-area"). fileUpload ({
2. "Url": "savetofile. php ",
3. "File": "myFile"
4. });

PHP section:

Copy content from PHP Code to clipboard

2. If (isset ($ _ FILES ['myfile']) {
3. // Example:
4. WriteLog ($ _ FILES );
5. Move_uploaded_file ($ _ FILES ['myfile'] ['tmp _ name'], "uploads/". $ _ FILES ['myfile'] ['name']);
6. Echo 'successful ';
7. }
8. Function writeLog ($ log ){
9. If (is_array ($ log) | is_object ($ log )){
10. $ Log = json_encode ($ log );
11. }
12. $ Log = $ log. "\ r \ n ";
14. File_put_contents ('Log. log', $ log, FILE_APPEND );
15. }
16. ?>

The above is all the content of this article, hoping to help you learn.

Original article: http://www.cnblogs.com/hutuzhu/p/5254532.html