Mobile terminal HTML5 realizes file upload_HTML/Xhtml_Web page production

Most files uploaded on the PC side use plug-ins. It doesn’t matter if you introduce flash. However, if the mobile side still uses various redundant plug-ins, it will probably be sprayed to death. The project needs to have the function of uploading images, since H5 already has relevant interfaces. And the compatibility is good, of course, priority is given to using H5 for implementation.

The main technologies used are:

ajax

FileReader

FormData

HTML structure:

XML/HTML CodeCopy content to clipboard

1. <div class="camera-area"> 
2.  <form enctype="multipart/ form-data" method="post">
3.  <input type="file" name="fileToUpload" class="fileToUpload" accept="image/*" capture="camera"/>
4.  <div class="upload- progress"><span>span>div>
5. form>
6.  <div class="thumb" >div>
7. div>

The packaged upload.js depends on zepto

JavaScript CodeCopy content to clipboard

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.           //选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件   
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 > 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.  //Upload files asynchronously
27. uploadFile: function() {
28.  var fd = new FormData();//Create 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 uploading, or preview the txt through other methods
35.                                                            
36. var xhr = new XMLHttpRequest();
xhr.upload.addEventListener(
37. "progress", funs.uploadProgress, false); // Monitor upload progress
xhr.addEventListener(
38. "load", funs.uploadComplete, false);
xhr.addEventListener(
39. "error", opts.uploadFailed, false);
xhr.open(
40. "POST", opts.url);
xhr.send(fd);
},
42. //File preview
43. previewImage: function(file) {
44. var gallery = doms.thumb;
45. var img = document.createElement("img");
46. img.file = file;
47. doms.thumb.html(img);
48.  //Use the FileReader method to display the image content
49. var reader = new FileReader();
50. reader.onload = (function(aImg) {
51. return function(e) {
52. aImg.src = e.target.result;
53.                                              
})(img);
reader.readAsDataURL(file);
},
uploadProgress:
57. function(evt) {
58. if (evt.lengthComputable) {
59. var percentComplete = Math.round(evt.loaded * 100 / evt.total);
doms.progress.html(percentComplete.toString()
60. '%');
                                                           
61. },
"uploadComplete"
63. : function(evt) { alert(evt.target.responseText)
64.                                                                   
};
65. doms.fileToUpload.on("change", function() {
66. doms.progress.find("span").width("0");
67. funs.fileSelected();
68. });
69. });
70. }
71. });
72. })(Zepto);

Calling method:

JavaScript CodeCopy content to clipboard

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

PHP part:

PHP CodeCopy content 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."rn";
14.  file_put_contents('log.log', $log,FILE_APPEND);
15. }
16. ?>

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

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